Problem with class change in IE
I need to change the class of an element on mouseover event and it doesn't fire. But if I add an alert in the function it does work.
Doesn't work:
mouseenter: function(){
$('#id-b-red').addClass('mouseover')
}
Does work:
mouseenter: function(){
alert('$%!# IE')
$('#id-b-red').addClass('mouseov开发者_开发百科er')
}
Maybe this has something to do with me using the :before and :after pseudo-elements?
.mouseover:before,
.mouseover .btn-before,
.mouseover:after,
.mouseover .btn-after{
background-position: 0 -33px;
}
but I don't know how to solve it.
Firstly, as has been stated in the comments, Javascript code requires semi-colons to end each statement. You can get away without them in some cases (where you only have one line in a block), which is why the original code worked without the alert, but I suspect this may be why adding the alert is not working. Good Javascript code should have a semicolon on the end of every line.
Secondly: please state what version of IE you're testing with (and what versions you need to work with). You're using :before and :after. Please note that these pseudo-selectors only work in IE8 and above. They do not work in IE6 or IE7. Therefore, if you're testing with an older version of IE (or in a newer version, but with quirks mode or compatibility mode in use), then :before and :after will be broken.
Try this. It works for me in all browsers...
<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>
加载中,请稍侯......
精彩评论