在不同的div下有多个元素在悬停时消失
在不同的div下有多个元素在悬停时消失
提问于 2019-04-26 21:19:57
我有2网格div，一个有图像，另一个有一个名字列表。每个div中的每个元素对应于另一个div中的另一个元素(例如。.image-1对应于.name-1)。
当您在其中一个元素上悬停时，我希望该元素和另一个div中相应的元素都消失。
例如，当您在"Name 1"上悬停时，我希望它和相应的image都消失。下面是我的一般html设置：
<body>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1">
<a href="#"><img src="images/image1.png" /></a>
</div>
<div class="grid-box image-2">
<a href="#"><img src="images/image2.png" /></a>
</div>
<div class="grid-box image-3">
<a href="#"><img src="images/image3.png" /></a>
</div>
<div class="grid-box image-4">
<a href="#"><img src="images/image4.png" /></a>
</div>
<div class="grid-box image-5">
<a href="#"><img src="images/image5.png" /></a>
</div>
</div>
<div class="names-grid grid">
<div class="grid-box name-1"><a href="#">Name 1</a></div>
<div class="grid-box name-2"><a href="#">Name 2</a></div>
<div class="grid-box name-3"><a href="#">Name 3</a></div>
<div class="grid-box name-4"><a href="#">Name 4</a></div>
<div class="grid-box name-5"><a href="#">Name 5</a></div>
</div>
</div>
</body>对不起，我被困在这上面好几个小时了，我很想得到帮助！这里有一把小提琴：
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-26 21:46:41
使用JQuery的一个解决方案是将data-*属性添加到HTML标记中。在这种方法中，我们将添加一个data-target属性，它将保存当当前元素悬停时应该隐藏的相关元素的class (与opacity: 0一起)。您可以使用JQuery.data()来处理data-*属性。检查下一个简化的例子，从这里我希望您能够理解基本的想法。
$(".grid-box").hover(
// Handler for hover-in.
function()
{
$(this).css("opacity", 0);
$($(this).data("target")).css("opacity", 0);
},
// Handler for hover-out.
function()
{
$(this).css("opacity", 1);
$($(this).data("target")).css("opacity", 1);
}
);.grid-box {
width: 100px;
background-color: skyblue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1" data-target=".name-1">
<a href="#">IMAGE 1</a>
</div>
<div class="grid-box image-2" data-target=".name-2">
<a href="#">IMAGE 2</a>
</div>
<div class="grid-box image-3" data-target=".name-3">
<a href="#">IMAGE 3</a>
</div>
<div class="grid-box image-4" data-target=".name-4">
<a href="#">IMAGE 4</a>
</div>
</div>
<hr>
<div class="names-grid grid">
<div class="grid-box name-1" data-target=".image-1">
<a href="#">Name 1</a>
</div>
<div class="grid-box name-2" data-target=".image-2">
<a href="#">Name 2</a>
</div>
<div class="grid-box name-3" data-target=".image-3">
<a href="#">Name 3</a>
</div>
<div class="grid-box name-4" data-target=".image-4">
<a href="#">Name 4</a>
</div>
</div>
</div>
Stack Overflow用户
发布于 2019-04-26 22:06:20
你可以这样做，我想图像和名字的数量是一样的，它们的顺序是一样的。这意味着图像1号在div中是第一位，而名称1在div中是第一位。
//getting all pictures by <a> tag
var pictures = document.querySelector(".picture-grid").querySelectorAll("a");
//getting all names by <a> tag
var names = document.querySelector(".names-grid").querySelectorAll("a");
//attach reaction to "hover" event to all pictures and names
for (var i = 0; i < pictures.length; i++){
pictures[i].addEventListener("mouseenter", hide.bind(i));
names[i].addEventListener("mouseenter", hide.bind(i));
}
//run function on "hover" event, i = index of chosen image/name
function hide (){
var i = this;
pictures[i].style.opacity = 0;
names[i].style.opacity = 0;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55875069
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号