Javascript 为什么我的代码在Firefox中可以，但在Chrome和InternetExplorer8中却不行？

在Firefox中，一切正常

但是，在Chrome和Internet Explorer 8中，它始终位于底部：

这是HTML：

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");
}

程序错误好的

程序错误好的

程序错误好的

程序错误好的

程序错误好的

程序错误好的

程序错误好的

程序错误好的

测试

您遇到了问题，因为您多次使用同一ID。这是无效的，因此行为未定义。此外，您的标记比您需要的多得多。最后，我会使用现有的工具提示插件，而不是滚动您自己的插件，但如果您愿意这样做，我会从以下内容开始：

<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>

<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>

和Javascript：

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

现在，这将只设置一次工具提示的位置。如果希望它跟踪鼠标移动，请使用和而不是

---

这种方法避免了不必要的（通常是昂贵的）DOM操作，并且在仅标记外部容器的类时更加不引人注目。

如果使用jQuery，您可能希望采用不同的方法来处理事件

首先，将

id=“content”

更改为

class=“content”

。ID必须是唯一的，如果在HTML中多次引用ID，则会导致问题。类可以多次使用

第二，如果您使用jQuery，那么最好让它负责分配事件处理程序。请注意，我删除了您的“onmouseover”语句

我还为包含

span

s的

div

提供了一个ID

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

---

这将把mouseover事件分配给作为#container子级的所有跨距。如果要使用jQuery函数，可以通过“this”或$（this）使用处理程序返回元素。

pageX

和

pageY

不是事件对象的标准属性。它们是Firefox扩展，在其他地方不起作用

但是，当事件处理程序从jQuery方法绑定时，jQuery修复了鼠标事件对象以添加这些非标准属性。这里不是这样，因为您使用的是内联事件处理程序属性。扔掉那些

此外，您在

中有无效的

和具有相同

id的多个元素，这些元素无效且通常无法工作，并且您的函数中缺少
var
声明，这可能会导致问题

$('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");
    });

});


#给小费。满足{
位置：绝对；背景：白色；边框：纯青色1px；
/*使其成为气泡的其他样式*/
}
程序错误好的
程序错误好的
程序错误好的
程序错误好的
$（'#tipped>div.content'）.hide（）；
$（'#tipped>div'）。悬停（函数（事件）{
$（this.find（'.content'）.css（{left:event.pageX-10，top:event.pageY+10}）.fadeIn（'slow'）；
}，函数（）{
$（this.find（'.content'）.hide（）；
});
您可以在这里发布您的标记吗？工具提示标记。
$('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");
    });

});

<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>