Question

我的jquery在我的图像映射的坐标悬停时运行我想要的动作，但当我将我的图像映射的共同定位悬停时，动作保持不变。如果我将鼠标悬停在其他合作伙伴上，它仍会显示第一个悬停的动作。我希望能够将鼠标悬停在第一个合作伙伴上，图像将返回其默认状态，然后如果我将鼠标悬停在另一个合作伙伴上，它将运行该操作。当我将其悬停时，它也将返回默认图像。

继承我的代码:)：

<div id="image">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="computer.jpg" usemap="#parts">
<map name="parts">
<area shape="poly" coords="1,131,102,80,124,108,108,143,-1,198,2,132" id="harddrive" href="#">
<area shape="poly" coords="0,199,106,144,117,128,101,171,1,220,1,200" id="cd" href="#">
<area shape="poly" coords="167,136,244,95,263,102,298,162,211,205,166,136" id="fan" href="#">
<area shape="poly" coords="110,63,192,19,197,1,225,2,260,62,241,93,157,139" id="powerblock"   href="#">
<area shape="poly" coords="132,287,240,238,263,273,155,319,131,286" id="graphicscard" href="#">
<area shape="poly" coords="160,318,219,294,213,319,229,334,217,369,170,388,147,367,159,318"       id="heatsink" href="#">
<area shape="poly" coords="172,389,259,353,273,384,207,413,192,413" id="motherboard" href="#">
</map>

<script type="text/javascript">

$('#harddrive').hover(function() {
$('#image').html('<img src="computer-harddrive.jpg">');
}, function() {
$('#image').html('');
});

$('#cd').hover(function() {
$('#image').html('<img src="computer-cd.jpg">');
}, function() {
$('#image').html('');
});

$('#fan').hover(function() {
$('#image').html('<img src="computer-fan.jpg">');
}, function() {
$('#image').html('');
});

$('#powerblock').hover(function() {
$('#image').html('<img src="computer-power.jpg">');
}, function() {
$('#image').html('');
});

$('#graphicscard').hover(function() {
$('#image').html('<img src="computer-graphicscard.jpg">');
}, function() {
$('#image').html('');
});

$('#heatsink').hover(function() {
$('#image').html('<img src="computer-heatsink.jpg">');
}, function() {
$('#image').html('');
});

$('#motherboard').hover(function() {
$('#image').html('<img src="computer-motherboard.jpg">');
}, function() {
$('#image').html('');
});

</script>

我的默认图片是computer.jpg

希望你能提供帮助：）

Answer 1

使用onmouseover和onmouseout怎么样？ http://www.w3schools.com/jsref/event_onmouseover.asp

如何让jquery在停留时停止运行动作？

1 个答案: