用jqueryhover地图区域精灵
我正在研究我的第一个真正的wordpress网站，我遇到了一些问题。 我真的希望有人可以帮助我。
所以我想要做的是根据当前hover的地图区域来定位我的div背景。
我在这里找到了一个例子： http ： //ubytujnaslovensku.sk/sk/
我得到了什么：HTML：
CSS
#front-cubus-wrapper{ width:355px; height:365px; position:relative; } #front-cubus{ width:355px; height:365px; position: absolute; background-image:url(images/insighttoimprove_website_cubus_index.png); z-index:1; } #front-cubus-hover{ width:355px; height:365px; position: absolute; background-image:url(images/insighttoimprove_website_cubus_index_hover.png); background-repeat:no-repeat; z-index:2; } #front-cubus-wrapper img{ position:absolute; width:355px; height:365px; z-index:3; }
jQuery的：
jQuery(document).ready(function($){ var default_value = $("#front-cubus-hover").css("background-position"); if (default_value === "0px 0px") { $('#map area').each(function() { $(this).hover( function() { var yposition = -1*365*($(this).index()+1); $("#front-cubus-hover").css("background-position","0 "+yposition+"px"); }, function() { $("#front-cubus-hover").css("background-position",default_value); } ); }); } });
我也在做类似的项目。 这是我的代码和解释。
HTML
CSS
img{ position: relative; } div.door1{ width: 200px; height: 150px; position: absolute; top: 0; left: 0; display: none; background: blue; pointer-events:none; } div.door2{ width: 180px; height: 300px; position: absolute; left: 453px; top: 404px; background: url("images/tire-modified.jpg") no-repeat left top; pointer-events:none; border-radius: 50%; }
jQuery的
因此，首先我将图像设置为相对位置，并在图像上使用两个区域进行贴图。 现在，在该地图hover部分我绑定了mouseenter和mouseleave事件，以便我可以设置我的其他div（根据区域）我可以用绝对位置设置它们。 不要忘记添加指针事件：无; 你的绝对元素，以便没有适用于这些元素的事件。 否则眨眼问题就会出现。 我希望它对你有所帮助。
定期的汽车图像。 定期的汽车图像
悬挂在汽车层（具有绝对位置的汽车层图像）。 悬挂汽车层（具有绝对位置的汽车层图像）