javascript - 触发多层元素的悬停行为

Question

我有一个页面，上面有一个图像网格。这些图像的不透明度最初设置为零(即，它们是隐藏的)。当鼠标移到图像上时，其不透明度立即设置为 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”上时，它下方的图像出现，当它悬停在“我”上方时，该文本下方的图像出现，并且一直可以单击链接.

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

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

Answer 1

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

<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;
}

DEMO