爲什麼我的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>