現象
mapにareaが複数あるとき、隣接していてもIEでは移動時にmouseoutとmouseoverが起きてしまう。
<!--html-->
<img src="http://jsrun.it/assets/o/l/f/d/olfdl.gif" alt="" usemap="#link"><!--画像-->
<map name="link">
<area shape="rect" coords="0,0,137,100" href="http://google.co.jp" alt="Google"><!--area1-->
<area shape="rect" coords="138,0,275,100" href="http://yahoo.co.jp" alt="Yahoo"><!--area2-->
</map>
//js
$('map').hover(function(){
$('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,0.3);
},function(){
$('img[usemap="#' + $(this).attr('name') + '"]').fadeTo(100,1);
});
解決策
.stop()を追加する
$('map').hover(function(){
$('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,0.3);
},function(){
$('img[usemap="#' + $(this).attr('name') + '"]').stop().fadeTo(100,1);
});