Question

当我将鼠标悬停在＆＃34;服务＆＃34;我希望箭头也变成蓝色。但是，当鼠标悬停在箭头上方时，箭头只会变为蓝色。我很感激任何建议。

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;
}

就是这样。

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

2 个答案: