將Div附加到鼠標上的圖像

我使用微小的MCE作爲編輯器。正如你可以在谷歌博客下面的圖片中看到，當你將鼠標懸停在圖像上時，它會顯示出具有「小」，「中」，「大」選項的圖像下方的div。任何建議/示例我如何能夠用JQuery做什麼？將Div附加到鼠標上的圖像

enter image description here

2011-04-01 Pit Digger

你可以準備的鏈接或任何內容的股利，並設置其顯示的CSS屬性爲「無」。然後你用這個jQuery來控制它。

var yourDiv = $("#ThatDiv"); 
$("#YourImage").hover( 
    function() {yourDiv.css('display','block');}, 
    function() {yourDiv.css('display','none');} 
});

更多受試者here（jQuery的API）。您可能需要調整懸停功能。（如添加超時，所以它不會立即鼠標移開後消失。）

可以propably想象的HTML代碼可能看起來像這樣的：

<img src="#" alt="" id="YourImage"/> 
<div id="ThatDiv" style="display:none"> 
    <a href="">...ETC... 
</div>

而你也將在外部樣式表使用CSS類代替內聯樣式。但這只是一個簡單的例子。

來源

2011-04-01 16:08:55 Damb

如果有多個圖像會發生什麼情況。這是否會顯示圖像下方的div，因爲我沒有看到任何關於它的位置的說明。 – 2011-04-01 16:29:43

您必須獲取圖像的位置（使用jQuery），然後將絕對位置設置爲該div（再次使用jQuery）。也可以使用class而不是id作爲圖片。 – Damb 2011-04-01 16:34:50

這很大程度上取決於場景....但是如果您的圖片將具有動態大小，那麼您應該從具有相對位置的包裝div開始。把圖像和div放入裏面。然後在每張圖片上，您必須計算圖片的大小並使用其座標來定位該div。像增加圖像高度值的頂部位置等。 – Damb 2011-04-01 16:41:13

將Div附加到鼠標上的圖像

回答

相關問題