Androbaut Androbaut - 1 year ago 62
Javascript Question

How to trigger div visibility when hovering over list item in CSS?

I'd like to hide a div using the css property

visibility: none
when a user hovers over a link wrapped in a list item.


<div id="rightnav" class="navbar-header pull-right">
<ul class="nav navbar-nav">
<li><a id="home" href="." data-pjax="content">Works</a></li>
<li><a id="about" href="studio.php" data-pjax="content">Studio</a></li>
<li><a id="contact" href="formspree.php" data-pjax="content">Contact</a></li>
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>

Is there a way to select the divs with id 'bar_*' when a user hovers over one of the list items (#home, #about, #contact) purely using CSS? I'm not opposed to using jQuery/Javascript, just trying to figure out the simplest way forward & found this surprisingly tricky.

Answer Source

This is quite simple with css try this fiddle link :

ul li a {


ul li a:hover {

 ul li a:hover + div.hide{

<ul><li><a href="#">hii</a>
<div class="hide"> hide</div></li>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download