0

简单来说...... ;-)

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

3 回答 3

1

干得好 ：）

这是一个工作小提琴

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

于 2012-11-03T21:10:49.757 回答
0

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

var s = this.id;
s = s.replace('m','w');
$("#" + s)...
于 2012-11-03T20:51:58.027 回答
0

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

$('area').hover(function(){
    $('#' +this.id.replace('m','w')).toggleClass('boldClass');
});
于 2012-11-03T21:17:41.467 回答