在IE浏览器中jQuery冲突悬停/切换状态？

这里是我的代码：在IE浏览器中jQuery冲突悬停/切换状态？

<!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）中的预期效果。有什么想法发生在这里？

来源

2009-10-19 dmrnj

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

来源

2009-10-19 19:42:42 Pointy

好通话！我在所有错误的地方寻找问题的根源。万分感谢。 – dmrnj 2009-10-19 19:50:40

在IE浏览器中jQuery冲突悬停/切换状态？

回答

相关问题