将鼠标悬停在CSS中的列表项上时如何触发div可见性？

Question

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 1

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>

Answer 2

You may use

Array.from(document.querySelectorAll('[id=^bar]')).forEach(x => x.style.visibility = 'hidden')

to select all elements with id starting with bar.

MDN Source

Answer 3

You can use sibling selector coupled with hover. Hope this is what you are looking for:

 #rightnav div{ background: red; display: block; } #rightnav #bar1{ background: red; } #rightnav #bar2{ background: blue; } #rightnav #bar3{ background: green; } li:nth-child(1):hover ~ div:nth-of-type(1){ display: none !important; } li:nth-child(2):hover ~ div:nth-of-type(2){ display: none !important; } li:nth-child(3):hover ~ div:nth-of-type(3){ display: none !important; } 

 <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">Home</div> <div id="bar2">About</div> <div id="bar3">Contact</div> </ul> </div> 

Answer 4

Try this:

For simplicity, you can restructure your html like this:

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

CSS:

.navbar-nav li:hover .nav-content {
  visibility: hidden;
}

Ref: http://jsbin.com/xekojel/edit?html,css,output