2

Heyah,

I made a burger menu icon, and I want it to change color when you hover over it, but somehow it doesn't work and I don't understand why. I have those 3 spans, which when the menu is clicked turn into just two, and I got the hover effect to work for each span inividually, but I want all spans to change color at a time.

$(document).ready(function(){
    $("#burger-container").on('click', function(){
        $(this).toggleClass("open");
    });
});
#burger-container{
    margin: 25px 0 0 0;
    width: 50px;
    float: right;
    padding-right: 70px;
}

#burger{
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
}

#burger span{
    background: black;
    display: block;
    width: 50px;
    height: 3px;
    margin-bottom: 10px;
    position: relative;
    top: 0;
    transition: all ease-in-out 0.4s;
}

#burger-container.open span:nth-child(2){
    width: 0;
    opacity: 0;
}

#burger-container.open span:nth-child(3){
    transform: rotate(45deg);
    top: -13px;
}

#burger-container.open span:nth-child(1){
    transform: rotate(-45deg);
    top: 13px;
}

span.hover:hover{
   background: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="burger-container">
            <div id="burger">
              <span class="hover">&nbsp;</span>
              <span class="hover">&nbsp;</span>
              <span class="hover">&nbsp;</span>
            </div>
        </div>
heartcube
  • 109
  • 10

1 Answers1

1

You should change the color of the .hover spans, when their parent #burger:hover is hovered:

#burger:hover .hover{
   background: #666666;
}


$(document).ready(function(){
    $("#burger-container").on('click', function(){
        $(this).toggleClass("open");
    });
});
#burger-container{
    margin: 25px 0 0 0;
    width: 50px;
    float: right;
    padding-right: 70px;
}

#burger{
    cursor: pointer;
    display: block;
    width: 50px;
    height: 50px;
}

#burger span{
    background: black;
    display: block;
    width: 50px;
    height: 3px;
    margin-bottom: 10px;
    position: relative;
    top: 0;
    transition: all ease-in-out 0.4s;
}

#burger-container.open span:nth-child(2){
    width: 0;
    opacity: 0;
}

#burger-container.open span:nth-child(3){
    transform: rotate(45deg);
    top: -13px;
}

#burger-container.open span:nth-child(1){
    transform: rotate(-45deg);
    top: 13px;
}

#burger:hover .hover{
   background: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="burger-container">
            <div id="burger">
              <span class="hover">&nbsp;</span>
              <span class="hover">&nbsp;</span>
              <span class="hover">&nbsp;</span>
            </div>
        </div>
Ori Drori
  • 145,770
  • 24
  • 170
  • 162
  • hey new problem: now once you've clicked on the button it stays gray and doesn't turn back to black. but only on mobiles, works perfectly in my browser and if I use devtools, but once I chose a certain phone, lets say iphone 5, it doesnt turn back to black anymore, any idea why that is? – heartcube Jul 29 '17 at 21:14
  • 1
    That's a know hover problem on some mobiles. See this [thread](https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices). – Ori Drori Jul 29 '17 at 21:54
  • thank you that was very helpful, didn't know that it was such a common problem – heartcube Jul 31 '17 at 11:04