Androbaut Androbaut - 3 months ago 10
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.

HTML

<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>
</ul>
</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

This is quite simple with css try this fiddle link :https://jsfiddle.net/xfz6x9wt/

ul{
height:30px;
}
ul li a {

color:green}

ul li a:hover {
color:red;
}

 ul li a:hover + div.hide{
color:red;
visibility:hidden;
}

<ul><li><a href="#">hii</a>
<div class="hide"> hide</div></li>
</ul>