jquery/css在IE瀏覽器的jQuery顯示中更改css

我用jQuery製作了懸停功能。所有在FireFox和Chrome中運行良好，問題出在IE上。我更改CSS頂部/左側，並使用jquery.show使div可見。雖然在IE中第一次將它懸停，但它顯示的位置不對。第二次它顯示就好了..jquery/css在IE瀏覽器的jQuery顯示中更改css

var x = (e.pageX - this.offsetLeft) - $(this).next("div").width(); 
var y = e.pageY - this.offsetTop; 



$(this).next("div").css({ display: 'block', 'position': 'fixed', zIndex: 2, left: x, top: y }); 

$(this).next("div").show("slow");

它再次在Chrome和Firefox，但是IE的偉大工程。（我只測試IE9）

這是CSS div的在默認情況下將其隱藏：

display:none; 
position:fixed; 
z-index:2;

來源

2012-02-14 Quincy Jones

爲什麼不添加到下一格一類，並給予一個CSS類定義，該類在'css'文件？ – gdoron 2012-02-14 19:24:32

最初它有一個CSS類（顯示爲display：none等），但我不知道。我只是這樣做了。在IE中使用.css和addClass的方式有什麼不同嗎？ – 2012-02-14 19:27:21

適合我：http://jsfiddle.net/gilly3/gup8u/。你可以發佈一個[jsfiddle]（http://jsfiddle.net/）來演示這個問題嗎？ – gilly3 2012-02-14 19:33:10

您正在運行到這個問題，因爲當你計算x股利尚未完全加載。 jQuery不知道div的寬度是多少，因此返回0.下一次，當然div已經加載了，jQuery的寬度是正確的。

您可以通過設置right而不是left來更正此問題。這提高了動畫爲好，在我看來：

http://jsfiddle.net/gilly3/gup8u/22/

$('.linkin').hover(function(e) { 
    var x = document.documentElement.offsetWidth - e.pageX; 
    var y = e.pageY; 

    $(this).next("div").css({ 
     right: x, 
     top: y 
    }).stop(true, true).show("slow"); 
}, 
function() { 
    $(this).next().addClass('tooltip').stop(true, true).hide("slow"); 
});

來源

2012-02-14 22:12:33 gilly3

謝謝，看來確實工作！ IE瀏覽器很爛，然後FF和Chrome做得很好 – 2012-02-14 22:34:24

@QuincyJones - 它不適用於我的Chrome或Firefox。 Chrome的行爲如IE：http：//imgur.com/G21wz。 Firefox *永遠不會*正確，通常div是以縮略圖爲中心的，有時候它會偏離左邊，但從未排列在縮略圖的左側。對於我來說，Firefox和IE也同樣緩慢。 Chrome只是更快一點。 – gilly3 2012-02-14 22:52:26

jquery/css在IE瀏覽器的jQuery顯示中更改css

回答

相關問題