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.
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments