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

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/

现在，尚不清楚您究竟需要什么。元素的“链接”由代码提供：

$('#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 以了解如何绘制图像。