1

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

那就是：我希望悬停行为不仅针对最上面的元素触发，而且还针对其下方的元素触发。

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

4

1 回答 1

0

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

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

演示

于 2012-06-29T15:17:02.927 回答