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

时间:2017-06-09 05:27:03

标签: imagemap

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

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

enter image description here

1 个答案:

答案 0 :(得分:0)

我相信您正在寻找这篇文章在部分内容中提供的答案: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有关如何制作图像的建议。