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滑塊：保持圖像在屏幕上

回答

相關問題