Question

我有这个HTML结构：

<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>

因此，在悬停.description-first时可以将opacity: 1;设置为.item-first吗？还是用JS才有可能？感谢您的帮助！

Answer 1

正如Strebler所说，这只有使用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

不可能。您在CSS中得到的最接近的结果是在悬停时使用.list-wrapper，如下所示：

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

但这不是我想要的。：）

Answer 3

这是我的解决方案。通过我的解决方案，我可以根据索引添加一个类。

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>

将鼠标悬停时的CSS类应用于其他元素

3 个答案: