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!

This is impossible without js. It could have been done using CSS selectors if both were direct brothers in the DOM. — ostrebler, Mar 11 '19 at 19:50
Possible duplicate of [Make :focus change css of another class](https://stackoverflow.com/questions/25807033/make-focus-change-css-of-another-class) — Woodrow Barlow, Mar 11 '19 at 20:14
@WoodrowBarlow You are wrong! Check his code. Completely different HTML structure... — Mr. Jo, Mar 11 '19 at 20:26
@Mr.Jo in both cases, the fact is that CSS `:hover` (or `:focus`, like in the other question) cannot cause other elements to change unless those elements are direct siblings or decendents of the target. the answers on the other question describe how to know when it's possible in CSS and also show javascript to accomplish the same effect when it isn't possible in CSS. — Woodrow Barlow, Mar 13 '19 at 13:48

el toro · Answer 1 · 2019-03-11T19:59:52.700

0

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>

edited Mar 11 '19 at 19:59

answered Mar 11 '19 at 19:56

el toro

532
4
11

I can't modify the
because this is generated. So maybe it's possible to make a function on hover that checks if it the 1 hovered element so it add the opacity to the first in the desc wrapper?

Mr. Jo

Mar 11 '19 at 19:57

Use `document.getElementsByClassName("class")[0]` instead. – el toro Mar 11 '19 at 19:58

score 0 · Answer 2 · answered Mar 11 '19 at 20:00

0

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. :)

answered Mar 11 '19 at 20:00

TVBZ

564
1
4
15

score 0 · Answer 3 · answered Mar 11 '19 at 20:30

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>

Apply CSS class on hover to other element

3 Answers3