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”在一个图像上，而“me”在另一个图像上。我希望页面表现得如此，当鼠标在“cli”上方时，它下方的图像会出现，当它在“me”上方时，会出现该位文本下方的图像，并且可以点击链接。

那就是：我希望悬浮行为不仅可以触发最顶层的元素，还可以触发它下面的元素。

有没有人对如何做到这一点有任何建议？

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

触发多层元素的悬停行为

1 个答案: