4
A
回答
2
<div onmouseover="document.getElementById('myimg').style.display='block';"
onmouseout="document.getElementById('myimg').style.display='none';">some text
</div>
<img id="myimg" style="display:none" src="beer.png" />
1
您可以使用jQuery:
HTML標記:
<html>
<body>
<p>Sample text</p>
<img class="thumbImage" style="display:none" src="sample.png" />
</body>
</html>
JavaScript代碼段:
$(document).ready(function(){
$('p').mouseover(function(){
// Put logic on show
$('.thumbImage').fadeIn('slow');
}).mouseout(function(){
// Put logic on hide
$('.thumbImage').fadeOut('slow');
});
});
在片斷,我用fadeIn
,fadeOut
,這增加了漂亮的淡入淡出效果。
JQuery的文檔:here
或者你也可以使用jQuery插件,這樣做,有淨很多例子。
相關問題
- 1. 將鼠標懸停在文本上時顯示圖像
- 2. 當鼠標懸停在超鏈接上時顯示圖片縮略圖(jQuery,CSS?)
- 3. 將鼠標懸停在圖像上時顯示文字
- 4. 在鼠標懸停時顯示鼠標懸停/縮略圖時的視頻播放
- 5. 當鼠標懸停在Jssor中的縮略圖菜單上時顯示字幕
- 6. 將鼠標懸停在另一圖像上時顯示圖像
- 7. 當鼠標懸停在縮略圖上時Google加彈出框?
- 8. 在鼠標懸停上顯示文字
- 9. 如何:將鼠標懸停在形狀上顯示文本框
- 10. 將鼠標懸停在gwt中的按鈕上顯示文本
- 11. 將鼠標懸停在文本框上?
- 12. 鼠標懸停在圖像上時可點擊圖標顯示
- 13. 顯示在鼠標懸停
- 14. 在鏈接上的鼠標懸停上顯示文本
- 15. 將鼠標懸停在絕對位置的縮略圖中(IE)
- 16. 圖像懸停 - 鼠標顯示爲文本圖標?
- 17. 在PHP中縮略圖鼠標懸停動態顯示全尺寸圖像
- 18. 將鼠標懸停在文本上時檢索文本值
- 19. 在鼠標懸停時顯示div
- 20. 將鼠標懸停在鏈接的縮略圖上以顯示更大的鏈接版本
- 21. 將鼠標懸停在圖片縮略圖上即可顯示幻燈片上的浮動狀態,例如hotels.com
- 22. jQuery將鼠標懸停在文本上以顯示淡入淡出的圖像
- 23. CSS3:當鼠標懸停在圖像div上時顯示隱藏文本div
- 24. 將鼠標懸停在鏈接上,圖片顯示循環
- 25. 當鼠標懸停在DropDownList項目上時顯示圖片ASP.NET
- 26. 當鼠標懸停在圖像上時顯示按鈕(rails image_tag)
- 27. 在鼠標懸停上突出顯示文本行
- 28. 如何在鼠標懸停上突出顯示文本
- 29. 在鼠標懸停的CSS欄上顯示文本
- 30. Jquery:當鼠標懸停在菜單項上,顯示文本
謝謝,就是我一直在尋找的!但是有一個問題,你對如何對齊縮略圖有任何想法嗎? –
拇指與什麼對齊?垂直還是水平?您發佈了一個鏈接或任何代碼,因此我們不知道該頁面是什麼樣子。 – COBOLdinosaur
對不起,我的意思是根據你的鼠標位置放置拇指。像一個普通的工具提示,而不是總是在文本之下。 –