悬停区域时更改带有地图区域的href链接（jQuery）答案

【问题标题】：Change href link with map area when hover the area (jQuery)悬停区域时更改带有地图区域的href链接（jQuery）
【发布时间】：2012-10-24 04:20:32
【问题描述】：

简单来说... ;-)

我有一个带有商店名称和计划的 href 列表。我可以将名称悬停在计划中，相应的商店就会亮起。还悬停在商店亮起的计划中……到目前为止……太好了……

我想不通：

当将商店悬停在计划上时，我喜欢在列表中以粗体设置 href 商店名称。

一点代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <link href="style.css" rel="stylesheet" type="text/css" media="screen"/>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.maphilight.js"></script>

    <script>
    $(function() { 

    $('.map').maphilight({ fillColor: 'FF0000', strokeWidth: 2, fillOpacity: 0.7 });

    $('#w147').mouseover(function(e) { $('#m147').mouseover(); }).mouseout(function(e) { $('#m147').mouseout(); }).click(function(e) { e.preventDefault(); });
     $('#w148').mouseover(function(e) { $('#m148').mouseover(); }).mouseout(function(e) { $('#m148').mouseout(); }).click(function(e) { e.preventDefault(); });
    $('#w149').mouseover(function(e) { $('#m149').mouseover(); }).mouseout(function(e) { $('#m149').mouseout(); }).click(function(e) { e.preventDefault(); }); 

    });</script>

</head>

<body>

<map name="WinkelPlattegrond">
    <area  id="m147" shape="rect" alt="Winkel 147" title="" coords="332,376,346,390" href="" target="" />
    <area  id="m148" shape="rect" alt="Winkel 148" title="" coords="348,371,360,391" href="" target="" />
    <area id="m149" shape="poly" alt="Winkel 149" title="" coords="339,375,339,364,361,364,361,369,346,369,347,375,340,375" href="" target="" />
</map>

<div style="float:left;">
<a href="#" id="w147">Winkel 147</a><br>
<a href="#" id="w148">Winkel 148</a><br>
<a href="#" id="w149">Winkel 149</a><br>
</div>

<div style="float:left;">
&nbsp;&nbsp;&nbsp;
</div>

<div style="float:left;">
<img src="plattegrond_werk.jpg" width="733" height="800" class="map" usemap="#WinkelPlattegrond">
</div>

</body>
</html>

【问题讨论】：

标签： jquery map hyperlink hover area

【解决方案1】：

给你:)

这是一个有效的Fiddle

jQuery

$('#m147, #m148, #m149').hover(
function() {$('#' +this.id.replace('m','w')).css({ 'font-weight' : 'bold' });} ,
function() {$('#' +this.id.replace('m','w')).css({ 'font-weight' : '' });}

);

HTML

【讨论】：

是的！谢谢，这就是我的方式！

【解决方案2】：

看起来链接有相应的 id，但链接以“w”开头。所以只需选择具有相同id的a标签即可。

var s = this.id;
s = s.replace('m','w');
$("#" + s)...

【讨论】：

【解决方案3】：

您可以将悬停事件绑定到area标签并解析ID以选择相应的链接。切换类更改并将类添加到您的 CSS 规则中

$('area').hover(function(){
    $('#' +this.id.replace('m','w')).toggleClass('boldClass');
});

【讨论】：