触发多层元素的悬停行为

trigger hover behaviour for multiple layers of elements

本文关键字：悬停 元素      更新时间：2023-09-26

我有一个页面，上面有一个图像网格。这些图像的不透明度最初设置为零（即，它们是隐藏的）。当鼠标移到图像上时，其不透明度立即设置为 1，当鼠标移开时，其不透明度会迅速淡化回零。相关代码如下所示：

.HTML

<img class="Image" src="./img/foo.png">

.CSS

.Image {
    opacity: 0;
}

.JS

$(".CircleImage").hover(
    function() {
        $(this).fadeTo(0,1);  // mouseenter
    },
    function() {
        $(this).fadeTo(200,0);  // mouseleave
    }
);

现在：我想添加一些链接，这些链接将显示在此图像网格上方。这里有一个问题：我希望图像保持其悬停行为。真正棘手的一点是，每个链接的文本将跨越多个图像，并且链接文本和图像的大小会随着窗口大小而动态变化。

例如，假设我有一个链接，其文本是"单击我"，并且在一个特定的窗口大小下，"单击"的"cli"位于一个图像上，而"我"位于另一个图像上。我希望页面的行为是，当鼠标在"cli"上时，它下面的图像会出现，当它位于"我"上时，会出现那段文字下面的图像，并且一直可以单击链接。

也就是说：我希望悬停行为不仅针对最顶层的元素触发，还针对其下方的元素触发。

有人对我如何实现这一目标有任何建议吗？

您可以将图像和链接包装在容器中，并更改该容器的不透明度。

<span class="imgContainer">
    <a href="#">X</a>
    <img class="Image" src="./img/foo.png" width="100" height="100">
</span>
.imgContainer {
    opacity: 0.1;
    width: 100px;
    height: 100px;
}
.imgContainer a {
    position: absolute;
}

演示

相关文章：