爲什麼這個Javascript無法在IE瀏覽器中工作

我有一段JavaScript代碼，適用於Chrome和Firefox，但不適用於IE。代碼應該改變CSS背景圖像時，鼠標懸停一些div和刪除背景圖像時，鼠標不在。爲什麼這個Javascript無法在IE瀏覽器中工作

的Javascript：

$(document).ready(function() { 
    $('.expositores1').hover(function() { 
     $('.expositores1').css('background-image', 'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r5_c2_f4.jpg)', 'background-repeat', 'no-repeat'); 
     $('.expositores2').css('background-image', 'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r12_c2_f2.jpg)', 'background-repeat', 'no-repeat'); 
     $('.expositores3').css('background-image', 'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r12_c4_f2.jpg)', 'background-repeat', 'no-repeat'); 
     $('.expositores4').css('background-image', 'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r14_c3_f2.jpg)', 'background-repeat', 'no-repeat'); 
    }); 
    $('.expositores1').mouseout(function() { 
     $('.expositores1').css('background-image', 'none'); 
     $('.expositores2').css('background-image', 'none'); 
     $('.expositores3').css('background-image', 'none'); 
     $('.expositores4').css('background-image', 'none'); 
    }); 
});

HTML：

<div class="expositores1"></div> 
<div class="expositores2"></div> 
<div class="expositores3"></div> 
<div class="expositores4"></div>

CSS：

.expositores1{ 
    position: absolute; 
    width: 306px; 
    height: 122px; 
    margin-left: 11px; 
    margin-top: 146px; 
} 
.expositores2{ 
    position: absolute; 
    width: 81px; 
    height: 127px; 
    margin-left: 11px; 
    margin-top: 268px; 
} 
.expositores3{ 
    position: absolute; 
    width: 185px; 
    height: 127px; 
    margin-left: 132px; 
    margin-top: 268px; 
} 
.expositores4{ 
    position: absolute; 
    width: 40px; 
    height: 90px; 
    margin-left: 92px; 
    margin-top: 304px; 
}

任何人都可以幫助嗎？爲什麼它可以在Chrome和Firefox中使用，但在IE中無法使用？

問候，雨果

來源

2013-07-03 Hugo Sousa

當你說不工作，哪部分不工作？你看到圖像與否，是鼠標懸停還是鼠標懸停的問題？ – Neil

到目前爲止，您嘗試過哪些版本的IE？ – morgano

我正在使用IE10。不起作用的是懸停。所以，我懸停divs和背景圖像沒有改變。 –

你使用jQuery css()函數不正確。

如果您只想設置一個屬性，請使用：.css('prop', 'value')。

如果您需要一次設置多個屬性，則必須通過object。和你的情況：

.css({ 
    'background-image':'url(/wp-content/themes/kallyas/images/mapa/piso0/inter_piso0_r5_c2_f4.jpg)', 
    'background-repeat':'no-repeat' 
    });

此外，作爲@Miro馬爾卡良pointed out，你真的應該依靠CSS :hover指令來實現這一目標，而不是JavaScript的。

來源

2013-07-03 10:50:49 haim770

這是真的，但爲什麼OP在某些瀏覽器中發現它「有效」？（我希望jQuery會忽略額外的參數，並使用前兩個，雖然我沒有檢查代碼。） – nnnnnn

我剛剛檢查，實際上jQuery只是忽略額外的參數。 – haim770

@nnnnnn呃...我認爲可能有很多因素，這些因素都是在一個瀏覽器中工作而不是在另一個瀏覽器中工作的原因。例如，[我掙扎着一個非常類似的問題]（http://stackoverflow.com/questions/17424828/chrome-firefox-doesnt-display-images-in-objects-shown-in-beforeunload-event），在FF/Chrome中不顯示圖像，但在IE中。 – trejder

可以這樣做與CSS hover選擇.. CSS已經具有實現真正容易..

你還挺重新發明輪子。

只需添加任何你想要的，當你hover到hover選擇器的CSS元素的發生：

.expositores1{ 
    position: absolute; 
    width: 306px; 
    height: 122px; 
    margin-left: 11px; 
    margin-top: 146px; 
    background-color: #F00; 
} 
.expositores1:hover { 
    background-color: #00F; 
}

和更好的瀏覽器將切換回正常的選擇您移動鼠標後出來.. 沒有必要讓JavaScript爲你做。

這是我爲你創造的JsFiddle。

來源

2013-07-03 10:55:29

但是如何改變其他三個div的背景（全部基於第一個懸停）？ – nnnnnn

其實我不能這樣做.expositores：懸停，因爲我想要改變幾個背景圖像，並使用.expositores：懸停它只會改變「this」div。 –

雨果 - 您可以更改第一個懸停的所有背景：http：//jsbin.com/isequv/1/edit（假設問題中的div是兄弟姐妹，如問題所示）。 – nnnnnn

爲什麼這個Javascript無法在IE瀏覽器中工作

回答

相關問題