Question

http://thenewcode.com/58/Simple-CSS-Hover-Image-Gallery

在此链接中，有一个图库的标记。如果将鼠标悬停在缩略图上，则会显示图片。如果单击缩略图，图像将保留（否则它将消失）。如果单击缩略图之外的任何位置，图像将消失。

我的问题是，如果您点击图片/缩略图之外的页面某处，必须采取哪些措施来防止图像消失？无论您在何处单击缩略图，我都希望图像保持不变（除非您为新图像单击另一个缩略图）。

我对编码的经验很少，所以非常感谢帮助。此外，我有必要使用这个确切的画廊。

谢谢！

Answer 1

你cannot do this with CSS，因为CSS无法区分你从未徘徊过的物品和你已经完成悬停的物品之间的区别。它只检测状态，例如“当前没有悬停”。所以你必须使用Javascript。使用jQuery看起来像

$("dt").on("mouseover", function() {
    // Hide other images only when we want to show a new one.
    $("dd").css("opacity", 0);
    $(this).next().css("opacity", 1);
});

Working JSFiddle

CSS Slider：将图像保留在屏幕上

1 个答案: