我有 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>
对不起，我已经被困在这个问题上好几个小时了，希望得到一些帮助!这是一个 fiddle :
最佳答案
使用 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>关于javascript - 让不同 div 下的多个元素在悬停时消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55875069/