在圖像的特定部分懸停時，使div出現在它旁邊
[英]make a div appear next to it on hover of a certain section of the image
問題描述
可以說我的圖像狹窄
200像素寬和900像素高
在圖像的特定部分懸停時，如何使div出現在它旁邊？
5 個解決方案
解決方案1
4 已采納 2012-04-19 15:55:28
使用map元素定義圖像區域，可以使用rect，circle和poly等不同形狀，因此基本上可以映射任何復雜區域。
例如在下面的示例中，我映射了圖像的左右部分
HTML：
<html><body>
<img src="https://www.google.com/images/srpr/logo3w.png" usemap="gmap"/>
<map name="gmap">
<area id="left" shape="rect" coords="0,0,135,95" />
<area id="right" shape="rect" coords="135,0,275,95" />
</map>
</body></html>
JavaScript（使用jQuery）：
$('#left').hover(function(){
alert("left")
})
$('#right').hover(function(){
alert("right")
})
實際操作中查看它http://jsfiddle.net/anuraguniyal/GtMXk/3/
解決方案2
1 2012-04-19 15:53:43
在您的圖片上放置一個div，其position:absolute和/或z-index:100 ，並在其上綁定.hover()事件。
解決方案3
1 2012-04-19 15:54:13
獲取鼠標的位置，獲取圖像的位置，計算差值以算出您在圖像的哪一部分。
解決方案4
1 2012-04-19 15:59:04
您可以使用CSS定位圖像，然后使用jquery .hover（）和.fade（）或.show（）/ .hide（）
解決方案5
0 2012-04-19 16:04:15
您應該簽出此插件：
http://plugins.jquery.com/project/maphilight
和演示：
http://davidlynch.org/js/maphilight/docs/demo_usa.html
您也許可以使用其中的一些代碼。
如何使div出現在另一個div的懸停上（CSS或JavaScript）
[英]How to make a div appear on hover of another div (CSS or JavaScript)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.