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>

score 1 · Accepted Answer · answered Oct 06 '15 at 05:48

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.

answered Oct 06 '15 at 05:48

Laxmikant Dange

7,606
6
40
65

Thank you Laxmikant Dange, May I ask why you have included 2 columns next to each other instead of only 1. Because it works with only one column as well. Can you give me vote up please? – sparrow Oct 06 '15 at 06:20
Hey Laxmikant Dange, how do you do a line brake when you write a comment? Thank you – sparrow Oct 06 '15 at 06:22
@sparrow, Please refer https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3Aafter – Laxmikant Dange Oct 06 '15 at 06:24
Thank you, i get it now double column is css3 attribute, Hey how do you do a line brake when you write a comment? – sparrow Oct 06 '15 at 06:49
@sparrow, Is this about stackoverflow comments?? then you can ask this question on http://meta.stackoverflow.com/. Actually I am also not aware of this. :P – Laxmikant Dange Oct 06 '15 at 09:09
What I mean is when you wrote you answer you put a line brake between your two sentences. How did you do that? – sparrow Oct 06 '15 at 10:10

score 1 · Answer 2 · answered Oct 06 '15 at 05:48

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.

Thank you Abhitalks, your answer was exactly what I was looking for. Can you give me vote up please? It helps, thank you again — sparrow, Oct 06 '15 at 05:58

score 1 · Answer 3 · answered Oct 06 '15 at 05:48

1

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

answered Oct 06 '15 at 05:48

Sanjay Bhardwaj

412
2
10

Thank you Sanjay Bhardwaj, your answer does the job as well, It's not as elegant as Abhitalks's AND Laxmikant Dange'e answers but on other hand it gives me an idea how to change color of div and span separately Can you give me vote up please? – sparrow Oct 06 '15 at 06:10
1

Thank you too, i have learnt about two separate management on hover. I voted you. – Sanjay Bhardwaj Oct 06 '15 at 06:13

How to change span color on div hover

3 Answers3

Linked