鼠标悬停名称时更改下拉箭头的颜色

Question

当我将鼠标悬停在“服务”上时，我希望箭头也变成蓝色。但是，只有当鼠标悬停在箭头上时，箭头才会变为蓝色。如有任何建议，我将不胜感激。

CSS：

/* arrow */
nav ul #arrow {
    content: '';
    border: solid #fff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    left: 5px;
    padding: 3px;
    position: relative;
    top: -2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/* Change arrow color when hover */
nav ul #arrow:hover {
    border-color: #8ea5c7;
}

这里是a link！

Answer 1

因此链接会在悬停时变为蓝色，并带有以下 css：

nav ul li:hover a {
    color: #8ea5c7;
    text-decoration: none; 
}

您希望箭头发生同样的事情，但您只将箭头的规则应用于箭头本身：

nav ul #arrow:hover { 
    border-color: #8ea5c7;
}

这确实只会在悬停箭头时改变颜色。

所以当您将鼠标悬停在列表项上时，您希望箭头改变颜色，就像链接发生的情况一样？

nav ul li:hover a #arrow {
    border-color: #8ea5c7;
}

https://jsfiddle.net/cxo0mntt/3/

Answer 2

您只需将规则从nav ul #arrow:hover 更改为nav ul li:hover a #arrow。

nav ul li:hover a #arrow {
    border-color: #8ea5c7;
}

就是这样。