【问题标题】:Change color of drop-down arrow when mouse hovers the name鼠标悬停名称时更改下拉箭头的颜色
【发布时间】:2018-01-11 22:55:58
【问题描述】:

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

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

【问题讨论】:

    标签: css drop-down-menu hover


    【解决方案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/

    【讨论】:

    • 非常感谢,非常感谢您的帮助。 :)
    【解决方案2】:

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

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

    就是这样。

    【讨论】:

    • 非常感谢,非常感谢您的帮助。 :)
    猜你喜欢
    • 2018-07-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-04-03
    • 2012-01-21
    • 1970-01-01
    相关资源
    最近更新 更多