Apply CSS class on hover to other element

Question

I've this HTML structure:

 <div class="container"> <div class="list-wrapper"> <ul> <li class="item-first"> </li> </ul> </div> <div class="description-wrapper"> <div class="description-first"></div> </div> </div>

So is it possible to set the .description-first to opacity: 1; when hovering .item-first ? Or is this just possible with JS? Thanks for your help!

Answer 1

As Strebler said, this is only possible with Javascript.

 function MouseOver(value) { document.getElementsByClassName("description-first")[0].setAttribute("style", "opacity: " + value + ";"); }

 .description-first { opacity:0; }

 <div class="container"> <div class="list-wrapper"> <ul> <li onmouseover="MouseOver('1');" onmouseout="MouseOver('0');" class="item-first">hover here </li> </ul> </div> <div class="description-wrapper"> <div class="description-first">to make this appear</div> </div> </div>

Answer 2

Not possible. The closest you will get in css is using the .list-wrapper on hover like this:

.list-wrapper:hover + .description-wrapper > .description-first {
  opacity: 1;
}

But that's not what you want I guess. :)

Answer 3

This is my solution. With my solution I can add a class depending on the index.

 jQuery("li").hover(function () { jQuery(".description-wrapper").children().eq(jQuery(this).index()).toggleClass("description-visible"); });

 .description-wrapper div { opacity: 0; } .description-visible { opacity: 1 !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="list-wrapper"> <ul> <li class="item-first">First</li> <li class="item-second">Second</li> <li class="item-third">Third</li> </ul> </div> <div class="description-wrapper"> <div class="description-first">First</div> <div class="description-second">Second</div> <div class="description-third">Third</div> </div> </div>