将悬停时的CSS类应用于其他元素
将悬停时的CSS类应用于其他元素
提问于 2019-03-12 03:49:36
我有这样的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>
那么，是否可以在悬停.item-first时将.description-first设置为opacity: 1;？或者这只是JS可以做到的吗？谢谢你的帮忙!
回答 3
Stack Overflow用户
发布于 2019-03-12 03:56:09
正如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>
Stack Overflow用户
发布于 2019-03-12 04:00:04
不可能。最接近css的方法是在悬停时使用.list-wrapper，如下所示：
.list-wrapper:hover + .description-wrapper > .description-first {
opacity: 1;
}但我猜这不是你想要的。:)
Stack Overflow用户
发布于 2019-03-12 04:30:41
这是我的解决方案。使用我的解决方案，我可以根据索引添加一个类。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55109313
复制相关文章
相似问题
腾讯云开发者
