为什么我的jQuery代码在Firefox中没问题，但在Chrome和ie8中没有问题？

Question

function tip(evt,s){ 
     $('p#vtip').show(); 

     xOffset = -10; // x distance from mouse 
     yOffset = 10; // y distance from mouse 
     top = (evt.pageY + yOffset); 
     left = (evt.pageX + xOffset); 

     var str = $(s, "> #content").html(); 
     $('p#vtip #content').html(str); 
     $('p#vtip').css("top", top+"px").css("left", left+"px").fadeIn("slow"); 
} 

在Firefox：

alt text http://omploader.org/vM2hycg

，并在Chrome和IE8始终处于底部：

alt text http://omploader.org/vM2hycw

谁可以更改此代码为铬和IE8？

，这是HTML：

<div> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    <span onmouseover="tip(event,this);">程序错误<div id="content">good</div></span><br> 
    </div> 

<p id="vtip" style="position:absolute"><img id="vtipArrow" src="vtip_arrow.png" />testtest<span class="content"></span></p> 

Answer 1

如果您使用的是jQuery，您可能需要采取不同的方法来处理事件。

首先，将id="content"更改为class="content"。 ID必须是唯一的，并且如果您在HTML中多次引用它们，将会导致问题。类可以多次使用。

其次，如果您使用的是jQuery，您可能需要分配事件处理程序。注意我删除了你的'onmouseover'语句。

我也给了div的ID，其中包含span。

<div id="container"> 
    <span>程序错误<div class ="content">good</div></span><br> 
    <span>程序错误<div class ="content">good</div></span><br> 
    <span>程序错误<div class ="content">good</div></span><br> 
    <span>程序错误<div class ="content">good</div></span><br> 

    </div> 

接下来，在你的jQuery JavaScript中，指定“鼠标悬停”事件是这样的：

$('document').ready(function() { 

    $('#container span').bind('mouseover', function(evt) { 
     $('p#vtip').show(); 

     var xOffset = -10; // x distance from mouse 
     var yOffset = 10; // y distance from mouse 
     var top = (evt.pageY + yOffset); 
     var left = (evt.pageX + xOffset); 

     var str = $(this).children('.content').html(); 
     $('p#vtip .content').html(str); 
     $('p#vtip').css({top: top}).css({left: left}).fadeIn("slow"); 
    }); 

}); 

这将鼠标悬停事件指派给那些的#container的孩子所有的跨度。如果你想使用jQuery函数，你可以通过'this'引用带有处理函数的元素，或者使用$（this）。

Answer 2

，因为你已经使用了相同的ID多次你有问题。这是无效的，所以行为是未定义的。你也有更多的方式比你需要的标记。最后我会使用现有的工具提示插件，而不是滚动您自己，但如果你愿意这样做，我就开始是这样的：

<dl class="tips"> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
    <dt>程序错误</dt><dd>good</dd> 
</div> 

与CSS：

dl.tips dt { display: inline; } 
dl.tips dd { display: none; position: absolute; } 

和Javascript：

$(function() { 
    $("dl.tips dd").hover(function(evt) { 
    $(this).next().show().css({ 
     top: evt.pageY - 10, 
     left:} evt.pageX + 10 
    }); 
    }, function() { 
    $(this).next().hide(); 
    }); 
}); 

现在只会设置一次工具提示的位置。如果您希望它跟踪鼠标移动，请使用mousemove()和mouseout()而不是hover()。

该方法避免了不必要的（通常是昂贵的）DOM操作，并且在仅用外部类标记外部容器的标记中更加不显眼。

Answer 3

pageX和pageY不是事件对象的标准属性。它们是Firefox的扩展，不会在其他地方使用。

但是，当jQuery方法绑定事件处理函数时，jQuery会修复鼠标事件对象以添加这些非标准属性。这不是这种情况，因为您使用的是内联事件处理程序属性。摆脱那些。

另外，你有<div>内<span>这是无效的，而且多个元素与同id，这是无效的，往往是行不通的，而你缺少你的函数里面var声明可能导致的问题。

<style> 
    #tipped .content { 
     position: absolute; background: white; border: solid cyan 1px; 
     /* other styling to make it a bubble */ 
    } 
</style> 
<div id="tipped"> 
    <div>程序错误<div class="content">good</div></div> 
    <div>程序错误<div class="content">good</div></div> 
    <div>程序错误<div class="content">good</div></div> 
    <div>程序错误<div class="content">good</div></div> 
</div> 
<script type="text/javascript"> 
    $('#tipped>div .content').hide(); 
    $('#tipped>div').hover(function(event) { 
     $(this).find('.content').css({left: event.pageX-10, top: event.pageY+10}).fadeIn('slow'); 
    }, function() { 
     $(this).find('.content').hide(); 
    }); 
</script>