How to change span color on div hover

Question

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>

Answer 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.

Answer 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.

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