Question

这是我的代码：

<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
    label {display:block; width:300px; height:20px;}
    label.selected{background-color:#a33;}
    label.hover{background-color:#ccc;}
</style>
</head>
<body>

<label>
    <input type="checkbox" />Test text
</label>


<script type="text/javascript">
$("label input").change(function(){ $("label").toggleClass("selected"); });
$("label").hover(function(){ 
    $("label").addClass("hover");
    }, function(){ 
    $("label").removeClass("hover"); 
});
</script>

</body>
</html>

除了明显的事实，即我的广泛的类名和内联代码不理想（这是从更大的代码块中快速提取），我有另一个问题。

在IE7和IE 6中，当您将鼠标悬停在标签上时，颜色会按预期更改。但是，当您选中复选框并将其悬停时，颜色不会更改为“选定”类的背景颜色，除非您在页面上的空白处或其他元素中单击一下。

转到并取消选中该复选框，所选颜色将再次残留，直到您点击完毕为止。向toggleClass添加开关不会改变问题。

当然，这在Chrome和FF等现代浏览器中的预期效果如此。知道这里发生了什么吗？

Answer 1

在元素丢失焦点之前，IE不会触发“更改”事件。尝试绑定到“点击”而不是“更改”。

IE中的jQuery冲突的悬停/切换状态？

1 个答案: