當鼠標懸停在圖像上如何顯示覆蓋相鄰圖像的描述？

Question

希望有人能幫助我，或指引我走向正確的方向。

我想顯示一個圖像的網格，用戶可以將鼠標懸停在圖像上以獲取更多信息，就像它已完成here。

這是一件容易的事情嗎？我可以用純CSS做到，還是需要使用jQuery？如果可能的話，我只需要一個指向正確方向的指針？

Answer 1

你給的鏈接似乎先給背景圖像的懸停狀態，然後它會顯示一個提示。我正在努力弄清楚這一點。

---

所以，你在這裏。這裏是Fiddle！

最重要的是jQuery，它包含一個延遲以及CSS中聲明圖像的懸停狀態。因此，當用戶懸停圖片時，他得到的第一件事就是另一張圖片。這是通過簡單的CSS懸停和CSS精靈。

.item { 
    background-color: white; 
    width: 100%; 
    height: 100%; 
    background-repeat: no-repeat; 
    background-position: center top; 
} 

.item:hover { 
    background-repeat: no-repeat; 
    background-position: center bottom; 
} 

#flower { 
    background-image: url('http://bramvanroy.be/files/images/tooltipOverlay.jpg'); 
} 

當圖像在開始徘徊，jQuery的功能被觸發，但被延遲：

var tooltip = $(".item-tooltip"); 

tooltip.hide(); 

$(".item-wrapper").hover(
function() { 
    $(this).children(tooltip).delay(550).fadeIn("slow"); 
    $(this).children(".item").fadeOut("slow"); 
}, 
... 
​ 

而當鼠標離開提示，它就會被隱藏，並且.item再次顯示：

... 
    function(){ 
     $(this).children(tooltip).fadeOut("fast"); 
     $(this).children(".item").fadeIn("fast"); 
    } 
); 

• 更多關於jQuery的.delay()
• 更多關於CSS sprites
• Image copyright

---

改進答：

這裏是一個Showcase，這裏是展示的fiddle，這裏是小提琴，其中圖像does not change（如你所想）。

我已經使用jQuery插件hoverIntent來確保並非每個圖像即使在一毫秒內懸停都會顯示工具提示。它所做的是檢查用戶的意圖是否將圖像懸停，然後才執行此功能（在一定的時間之後）。有關此插件的更多信息，請點擊here。你可以使用jQuery的標準懸停（），但我不會建議它。

的Z-index需要相應的更改，否則圖像就會出現提示或其他項目的形象背後會重疊，我們希望圖像的工具提示。

如果您還有其他問題，請在評論中說明。

Answer 2

我會做的是使用jQuery。創建一個可見的div，然後隱藏一個顯示您懸停時想要的信息。然後只需使用jQuery來隱藏/顯示使用CSS的div。

$(".info-class").hover(function(){ 
    $(this).css('display', 'none'); 
    $(".other-clas").css('display', 'block'); 
}); 

東西通過超時類似於上面

Answer 3

我已經看過他們在那個網站上做了什麼，它看起來過於專注於我。

我會怎麼做，是我們添加

<div class="comtainer"> 
    <div id="g11" class="square large" data-show-tooltip-in="#g12, #g12"> 
     <div class="normal-view"><img ... ></div> 
     <div class="large-view"><img ... ></div> 
     <div class="tooltip">blah blah</div> 
    </div> 
    <div id="g12" class="square small" data-show-tooltip-in="#g13"> 
     ... 
    </div> 
    ... 
</div> 

CSS

div.large-view { display : none; } 
div.tooltip { display : none; } 

，然後的JavaScript會做類似（JQuery的速度）：

$('.square').on('mouseover', function*(e){ 
    //hides the normal image 
    $(this).find('.normal-view').hide(); 
    //shows the zoomed image 
    $(this).find('.large-view').show(); 
    //stores a reference to the square where the HTML tolltip will be shown 
    var $tooltip = $($(this).attr('data-show-tooltip-in')); 
    //hides the original content of the tooltip square 
    $tooltip.find('div').hide(); 
    //clones the tooltip to the other square and shows it 
    $(this).find('.tooltip').clone().qppendTo($tooltip).show(); 
}) 

這只是一個起點，但是我就是這麼想的。

編輯補充解釋

在HTML有一系列的類方形的股利（它們也可以是李時珍在UL名單，但現在這不重要）。每個方塊都有它需要的所有數據 - 正常圖像，縮放圖像和工具提示HTML。最後兩個隱藏在CSS中。每個正方形還有一個數據屬性（data-show-tooltip-in），其中顯示工具提示的選擇器（s）。

然後JS做了其餘的 - 評論應該幫助。