Question

我需要在mouseover事件上更改元素的类，但它不会触发。但是如果我在函数中添加警报它确实有效。

不起作用：

mouseenter: function(){
    $('#id-b-red').addClass('mouseover')
}

工作：

mouseenter: function(){
   alert('$%!# IE')
   $('#id-b-red').addClass('mouseover')
}

也许这与我使用:before和:after伪元素有关？

.mouseover:before,
.mouseover .btn-before,
.mouseover:after,
.mouseover .btn-after{
    background-position: 0 -33px;
}

但我不知道如何解决它。

Answer 1

首先，正如评论中所述，Javascript代码需要使用分号来结束每个语句。在某些情况下（在块中只有一行），你可以离开，这就是原始代码在没有alert的情况下工作的原因，但我怀疑这可能是为什么添加alert不起作用的原因。好的Javascript代码应该在每一行的末尾都有一个分号。

其次：请说明您正在测试的IE版本（以及您需要使用的版本）。您正在使用:before和:after。请注意，这些伪选择器仅适用于IE8及更高版本。它们不适用于IE6或IE7。因此，如果您使用较旧版本的IE（或在较新版本中，但使用了怪癖模式或兼容模式）进行测试，则:before和:after将被破坏。

Answer 2

试试这个。它适用于所有浏览器......

<html>
<head>
    <title>Sample</title>
</head>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(e){
        $('#testBox').mouseenter(function() {
            $(this).addClass('greenClass');
        });

        $('#testBox').mouseleave(function() {
            $(this).removeClass('greenClass');
        });
    });
</script>

<style type="text/css">
    .redClass{
        background-color:red;
    }

    .greenClass{
        background-color:green;
    }
</style>

<body>
    <div id="testBox" style="height:30px; width:30px;" class="redClass"></div>
</body>

IE中的类更改问题

2 个答案: