Is it possible to display a class when hovering over a different class inside the same parent?

Question

I want to make the ".navbar-drop" visible (display: block) when I hover over the element with class="fas fa-bars".

Not working:

.navbar-drop {
    display: none;
}
.navbar i:hover .navbar-drop {
    display: block;
}

Here is the html:

 <div class="navbar">
        <div class="navbar-drop">
            <ul>
                <li><a href="#" class="home">Home</a></li>
                <li><a href="#" class="about-me">About Me</a></li>
                <li><a href="#" class="my-projects">My Projects</a></li>
                <li><a href="#" class="contact-me">Contact Me</a></li>
            </ul>
        </div>
        <i class="fas fa-bars"></i>
    </div>

My apologies if this is a duplicate but I've searched for the anwser for almost half an hour and I can't find anything I can understand.

score 0 · Answer 1 · answered Feb 18 '19 at 13:31

0

you cant select a father element, you need obey the rules of css selector. for this case the correct is it:

.navbar:hover .navbar-drop {
    display: block;
}

that is, on hover in .navbar tag you will set display block in your children ..navar-drop, not is plossible select a father element or something that not is possible with css selector rules

answered Feb 18 '19 at 13:31

TheDev

407
2
12

I get it, Thank you <3 – MoreeZ Feb 18 '19 at 13:45

score 0 · Answer 2 · 2019-02-18T14:08:48.617

Nope, i do not think this is possible in CSS, but it is possible with jQuery.

I would fix it by using this bit of jQuery

  $( ".navbar i" ).hover(
  function() {
    $( ".navbar-drop" ).css( "display", "block" );
  }, function() {
    $( ".navbar-drop" ).css( "display", "none" );
  }
);

Hope this helps :)

EDITED:

This is also possible in plain JavaScript like below

var hoverPoint = document.getElementsByClassName("fas")[0];
var endPoint = document.getElementsByClassName("navbar-drop")[0];

hoverPoint.addEventListener('mouseover', function() {
   endPoint.classList.add('hovered');
});

hoverPoint.addEventListener('mouseout', function() {
    endPoint.classList.remove('hovered');
});

And then copy this to your CSS :-)

.navbar-drop.hovered {
display: block;
}
.navbar-drop {
display: none;
}

Thanks, any way to do it without importing the whole library? like .addEventListener('mouseover', ... just not sure how to close it after — MoreeZ, Feb 18 '19 at 13:44

Is it possible to display a class when hovering over a different class inside the same parent?

2 Answers2