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

Question

我面临着绘制带有菜单栏悬停效果的图像地图，如URL：http://www.99acres.com/paras-seasons-sector-168-noida-npxid-r6378e

问题是当我将鼠标悬停在菜单上时，它还交替突出显示图像的一部分当我将一部分图像悬停时，它也会突出显示菜单。

Answer 1

我相信您正在寻找这篇文章在部分内容中提供的答案：Link the hover state on two elements。其中一个提供的小提琴提供了我使用的示例  在我的codepen中使用链接两个元素的方法：http://jsfiddle.net/LN2VL/24/

现在，目前还不清楚你需要什么。 ＆＃34;链接＆＃34;元素由代码提供：

$('#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

假设您已经映射了图像，并且可以为每个地图添加一个类或ID。这样你就可以将它们连接在一起了。如果您需要帮助，我建议您查看Using JQuery hover with HTML image map有关如何制作图像的建议。