首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将悬停时的CSS类应用于其他元素

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

Stack Overflow用户
提问于 2019-03-12 03:49:36
回答 3查看 245关注 0票数 0

我有这样的HTML结构:

代码语言:javascript
复制
<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>

那么,是否可以在悬停.item-first时将.description-first设置为opacity: 1;?或者这只是JS可以做到的吗?谢谢你的帮忙!

EN

回答 3

Stack Overflow用户

发布于 2019-03-12 03:56:09

正如Strebler所说,这只有Javascript才有可能。

代码语言:javascript
复制
function MouseOver(value) {
  document.getElementsByClassName("description-first")[0].setAttribute("style", "opacity: " + value + ";");
}
代码语言:javascript
复制
.description-first {
  opacity:0;
}
代码语言:javascript
复制
<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>

票数 0
EN

Stack Overflow用户

发布于 2019-03-12 04:00:04

不可能。最接近css的方法是在悬停时使用.list-wrapper,如下所示:

代码语言:javascript
复制
.list-wrapper:hover + .description-wrapper > .description-first {
  opacity: 1;
}

但我猜这不是你想要的。:)

票数 0
EN

Stack Overflow用户

发布于 2019-03-12 04:30:41

这是我的解决方案。使用我的解决方案,我可以根据索引添加一个类。

代码语言:javascript
复制
jQuery("li").hover(function () {
    jQuery(".description-wrapper").children().eq(jQuery(this).index()).toggleClass("description-visible");
});
代码语言:javascript
复制
.description-wrapper div {
  opacity: 0;
}

.description-visible {
  opacity: 1 !important;
}
代码语言:javascript
复制
<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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55109313

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档