How to change span color on div hover

雨燕双飞 提交于 2019-12-07 11:48:17

问题


I am trying to change color of span on div's hover

How to make the red hamburger button (which is span) to change the color to black on div's hover

PS: Right now it does it on span's hover

JSFiddle: https://jsfiddle.net/bjjbqct8/

.mobile-nav-toggle {
    height: 50px;
    width: 35px;
    margin-right: 31px;
    background: #ddd;
    display: flex;
    align-items: center;
    cursor: pointer; }
    .mobile-nav-toggle span,
    .mobile-nav-toggle span::before,
    .mobile-nav-toggle span::after {
        border-radius: 2px;
        content: "";
        display: block;
        height: 6px;
        width: 100%;
        background: rgba(177, 66, 66, 0.8);
        position: relative; }
    .mobile-nav-toggle span::before {
        top: 11px; }
    .mobile-nav-toggle span::after {
        bottom: 17px; }
        .mobile-nav-toggle span:hover,
        .mobile-nav-toggle span:hover:before,
        .mobile-nav-toggle span:hover:after {
            background: rgba(0, 0, 0, 0.8); }
<div class="mobile-nav-toggle">
    <span></span>
</div>

回答1:


Use hover psuedo selector for div instead span.

This is the selector you need to use

    .mobile-nav-toggle:hover span,
    .mobile-nav-toggle:hover span::before,
    .mobile-nav-toggle:hover span::after {
        background: rgba(0, 0, 0, 0.8); }

Here is fiddle.




回答2:


Change your hover rules,

from this:

.mobile-nav-toggle span:hover,
.mobile-nav-toggle span:hover:before,
.mobile-nav-toggle span:hover:after {
    background: rgba(0, 0, 0, 0.8); 
}

to this:

.mobile-nav-toggle:hover span,
.mobile-nav-toggle:hover span:before,
.mobile-nav-toggle:hover span:after {
    background: rgba(0, 0, 0, 0.8); 
}

Reason: When you create a rule on hover of span and its pseudo-elements, only the ones you hover over will apply the styles. What you need is to create a rule on the div so that whenever you hover on that div the children get the styles.




回答3:


this will work,

.mobile-nav-toggle:hover span,
.mobile-nav-toggle:hover span:before,
.mobile-nav-toggle:hover span:after,
.mobile-nav-toggle span:hover,
.mobile-nav-toggle span:hover:before,
.mobile-nav-toggle span:hover:after {
 background: rgba(0, 0, 0, 0.8); }


来源:https://stackoverflow.com/questions/32947655/how-to-change-span-color-on-div-hover

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!