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

Posted 2023-05-08

【中文标题】如何绘制菜单列表悬停有效的图像地图？

【英文标题】：How to draw an image map with menu list hover effective?

【发布时间】：2017-11-11 00:07:17

【问题描述】：

我不得不用菜单栏悬停有效的方式绘制图像地图，例如 URL：http://www.99acres.com/paras-seasons-sector-168-noida-npxid-r6378e

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

【问题讨论】：

请查看本指南，现在您的问题措辞似乎是在要求社区为您编写代码：codeblog.jonskeet.uk/2012/11/24/…

【参考方案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 以了解如何绘制图像。