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

Androbaut

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.

Friend

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.

edited at
0

Comments

0 comments
Login to comment

Related

How to trigger two hovers when hovering over single element CSS

How to highlight the whole button when hovering over CSS Grid item?

Trigger CSS :hover only when hovering over border box

Trigger CSS animation when hovering over pseudo element?

CSS3 Slight indentation when hovering over a nav item

keep parent css when hovering over child item

Keep main nav item hover CSS when hovering over dropdown

How to display a div when hovering over an image using CSS/HTML + Transitions?

CSS div that appears when hovering on anchor; keeping it visible while hovering over div

How to display a div when hovering over another div

How to paint an outline when hovering over a QListWidget item?

Trigger CSS animations by hovering over a seperate element

How to scroll up a div when hovering over another element

How to change css of one class when hovering over another?

How can I avoid CSS flickering when hovering over areas?

How to show the dropdown when hovering over the dropdown list

jQuery hovering over one div to trigger changes in another div

How to make hovering over one div to trigger changes in two different divs?

Is there a way to change a target div's text when hovering over other div's using css only?

keep css menu parent item active when hovering over sub menu

Displaying button when hovering over div in TailwindCSS

Changing divs when hovering over a different div

How do I trigger a click when hovering over a element for x seconds, using JQuery?

Zoom in when hovering over image - CSS & HTML

Change image when hovering over a list of text

Hovering over a div doesn't trigger overflow overlay scrollbar in Chrome

How to have a div show up when hovering over elements but not appear over the mouse pointer?

CSS: Border on top of navigation item when hovering

CSS Animation on Menu item is not working when hovering