Javascript 一个多鼠标翻转方法的例子，FF或Chrome上都不适用。为什么？
我已经把我那烦人的文章浓缩成一个简单的例子。我想要一个简单的图像改变或更换时，鼠标滚动到它。我试过多种方法，但没有一种能始终如一地奏效 这是一个测试网页的html，所有的鼠标都可以在IE中正常工作，但在FF或Chrome中不起作用Javascript 一个多鼠标翻转方法的例子，FF或Chrome上都不适用。为什么？,javascript,jquery,google-chrome,mouseover,Javascript,Jquery,Google Chrome,Mouseover,我已经把我那烦人的文章浓缩成一个简单的例子。我想要一个简单的图像改变或更换时，鼠标滚动到它。我试过多种方法，但没有一种能始终如一地奏效 这是一个测试网页的html，所有的鼠标都可以在IE中正常工作，但在FF或Chrome中不起作用 <!DOCTYPE html> <html lang="en"> <head> <title></title> <!--[if IE]> <script src="http://htm
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</script>
<script src="../js/jquery-1.8.0.min.js"></script>
<script src="../js/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements addnewbut
$(".syncarea").hover(function() {
$(this).attr("src","../images/syncarea.jpg");
}, function() {
$(this).attr("src","../images/syncareafilld.jpg");
});
$('img').bind('mouseover mouseout', function() {
$(this).attr({
src: $(this).attr('data-other-src')
, 'data-other-src': $(this).attr('src')
})
});
});
if (document.images) {
img1on= new Image;
img1on.src="../images/syncareafilld.jpg";
img1off= new Image;
img1off.src="../images/syncarea.jpg";
}
function rollon(imgName){
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
function rolloff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
</script>
</head>
<body>
Quick test of browser rolover responces. <br>
<center>
HTML style <br>
<a nohref="#nohref" onMouseOver='syncarea.src="../images/syncareafilld.jpg"' onMouseOut='syncarea.src="../images/syncarea.jpg"'>
<img src="../images/syncarea.jpg" name="syncarea" title="Special Functions Area (Sync Control panel)" usemap="#spclfuncarea" /></a><br>
jQuery type 1<br>
<img data-other-src="../images/syncareafilld.jpg" src="../images/syncarea.jpg"
title="Special Functions Area (Sync Control panel)" usemap="#spclfuncarea" /> <br>
jQuery type 2 <br>
<img src="../images/syncarea.jpg" class="syncarea" title="Special Functions Area (Sync Control panel)" usemap="#spclfuncarea" /> <br>
plain Javascript version 1<br>
<A onmouseover="rollon('img1')" onmouseout="rolloff('img1')">
<IMG SRC="../images/syncarea.jpg" name="img1" title="Special Functions Area (Sync Control panel)"
usemap="#spclfuncarea" /> </A><br>
</center>
<map name="spclfuncarea" id="spclfuncarea">
<area shape="rect" coords="7,44,94,66" href="maksats.html" title="Make Satellite Databases" />
<area shape="rect" coords="107,44,185,67" href="syncsats.html" title="Synchronize Databases" />
<area shape="rect" coords="86,14,184,35" class="small" href="#dbtyp-info" title="Database Type Marker" alt="Database Type"/>
<area shape="default" nohref="#nohref" title="Special functions area."/> </map> </body>
</html>
为什么这些不适用于FF和Chrome？尝试用mouseenter mouseleave替换events mouseover mouseout。如果您正试图通过以下代码使用mouseover和mouseout事件获得悬停效果，您可能也需要阅读。
$('img').bind('mouseover mouseout', function() {...})
我测试了你的页面，似乎jquery和imagemaps有问题。或者他们需要以另一种方式治疗 如果省略usemap属性。HTML、jQueryType2和纯JavaScript版本工作得非常好 我认为要么你必须将你的事件附加到地图上，而不是使用地图的元素上。或者你只需要单独对待它 如果无法将事件附加到映射，请参阅此以获取另一个提示：
编辑：再次测试。将事件附加到地图将不起作用。因此，您需要以特殊方式处理这些图像贴图。谢谢。Wow不敢相信其他浏览器不能处理图像映射和鼠标事件。我总是有问题（反应不正常）现在情况正好相反。
$('img[data-other-src]').on('mouseenter', function(){
// code for mouseenter
}).on('mouseleave', function(){
// code for mouseleave
});