如何通过鼠标hover在另一个映射图像区域上显示小图像和段落？

这将更好地解释我想要的东西而不是我的文字： http ： //jquery-image-map.ssdtutorials.com/即使该教程可用，但它是在photoshop中使用图像叠加完成的。 但我使用jquery插件“jquery.maphilight.js”突出显示我的映射图像。 使用它我有一个映射的图像，如果我鼠标hover在图像上，它会突出显示在映射的部分。 如果一个人将鼠标hover在特定房间（映射部分），如何显示小图片和段落。

这是javascript：

$(function () { $(".mapping").maphilight(); $("#mapping").css('visibility','hidden') $(".hoverable").css("border", "3px solid red"); 

这是图像映射的html：

Answer 1

使用jQuery mouseover事件。

您可以将它附加到文档就绪的“区域”标签上。

 $(document).ready(function(){ //this selector is selecting an element by the id of cr1. $('#cr1').on('mouseover', function(){ //do your showing here }); $('#cr1').on('mouseleave', function(){ //do your hiding here }); }); 

对于通用处理程序，您可以这样做：

 $(document).ready(function(){ //this is an attribute selector. //'area' is the typ of tag to match //[name indicates the attribute is named 'name' //^= indicates the attribute 'name' should start with the value following this operator //'room'] think of this as indicating the value of the name attribute // should match: 'room*' $('area[name^="room"]').on('mouseover', function(){ //do your showing here, be sure to show only //for the appropriate area. Maybe select on the id. }); $('area[name^="room"]').on('mouseleave', function(){ //do your hiding here. This could be generic unless you have //a multi-paragrah area instead of a single display area. }); }); 

Answer 2

这是我做的工作：我创建了一个带有“mouseover”和“mouseleave”属性的div。 在我的内部，当我将鼠标hover在这个div上时，我收到了我想要出现的另一个元素的id。

 
 onmouseout="document.getElementById('div1').style.display = 'none';">   

我发布了自己的答案，以便它也可以帮助其他人做同样的任务:)