如何绘制菜单列表悬停的图像映射有效？

问题描述：

我已经面临来绘制菜单栏悬停effetive像URL图像映射：http://www.99acres.com/paras-seasons-sector-168-noida-npxid-r6378e 如何绘制菜单列表悬停的图像映射有效？

此事是当我悬停菜单它也突出图像的一部分上交替当我悬停图片它也突出菜单的一部分。

请看看这个指南，现在你的问题是在你要求社区为你编写代码的地方：https：//codeblog.jonskeet.uk/2012/11/24/stack -overflow个问题的检查表/ – Graham

答

我相信你正在寻找这个职位在部分提供了答案：Link the hover state on two elements。提供的小提琴之一提供了一个例子，我用我的codepen中的为您提供了链接两个元素的方法：http://jsfiddle.net/LN2VL/24/

现在，它并不清楚你需要什么。元素的“链接”由代码提供：

$('#Room3Pic').hover(function() { 
    $("#Room3").trigger("mouseover"); 
}, function() { 
    $("#Room3").trigger("mouseout"); 
}); 

$('#Room3').hover(function() { 
    $('#Room3Pic').css('background-color', 'purple'); 
    $(this).css('background-color', 'purple'); 
}, function() { 
    $('#Room3Pic').css('background-color', 'white'); 
    $(this).css('background-color', 'white'); 
});

这是我对代码的修改，可能更适合您的需要。 https://codepen.io/pkshreeman/pen/dRvbZG?editors=1010

这是假设你已经映射出图像，并可以添加class或id到每个'地图'，以便您可以将它们链接在一起。如果您需要帮助，那么我建议您查看Using JQuery hover with HTML image map，了解如何绘制图像。

如何绘制菜单列表悬停的图像映射有效？

相关推荐