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

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