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

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/