Question

简单来说......; - ）

我有一个带有商店名称的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>

Answer 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

Answer 2

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

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

Answer 3

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

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

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

3 个答案: