为什么这个 Javascript 在 IE 中不起作用

Question

我有一段 Javascript 代码可以在 Chrome 和 Firefox 中运行，但在 IE 中无法运行。该代码应该在鼠标悬停某个 div 时更改 CSS 背景图像，并在鼠标离开时删除背景图像。

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 中无效？

问候， 雨果

Answer 1

您错误地使用了 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 Markarian pointed out，你真的应该依靠 CSS :hover 指令来实现这一点，而不是 JavaScript。

Answer 2

使用 css hover 选择器可以更轻松地完成此操作。CSS 已经实现了..

你有点在重新发明轮子。

只需将您在 hover 时想要发生的任何事情添加到该 css 元素的 hover 选择器：

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

更好的是，您的浏览器会在您将鼠标移出后切换回正常的选择器。 无需让 javascript 为您完成。

这是我为你创建的JsFiddle。