2

我有一段 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 中无效？

问候，雨果

4

2 回答 2

6

您css()错误地使用了 jQuery 函数。

如果您只想设置一个属性，请使用：.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指出的那样，您确实应该依靠 CSS:hover指令来实现这一点，而不是 JavaScript。

于 2013-07-03T10:50:49.810 回答
3

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

你有点重新发明轮子。

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

.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-03T10:55:29.050 回答