CSS滑块：保持图像在屏幕上

http://thenewcode.com/58/Simple-CSS-Hover-Image-Gallery CSS滑块：保持图像在屏幕上

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

我的问题，如果你点击图像/缩略图以外的页面上的某个地方，怎么办才能防止图像消失？无论您单击哪个位置（除非您单击另一个新图像的缩略图），我都希望图像保留一次。

我很少有编码的经验，所以帮助将不胜感激。此外，我有必要使用这个确切的画廊。

谢谢！

2016-05-17 miksham

您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

来源

2016-05-17 06:05:54 Noumenon

非常感谢您！很棒。最后一个问题，如果你可以帮助我...你会怎么做，第一个图像是默认选择？只有您开始将鼠标悬停在缩略图上时，图片才会显示。我希望第一个缩略图图像在默认情况下已经显示。 – miksham

我很欣赏你的礼貌态度。 'dl＃simple-gallery dd：第一个类型{opacity：1}'将会工作。 – Noumenon

完美的作品。非常感谢你本体！ :) – miksham

CSS滑块：保持图像在屏幕上

回答

相关问题