StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery conflicting hover/toggle states in IE?
text
Body
copied!<p>Here's my code:</p> <pre><code><!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> </code></pre> <p>Other than the obvious fact that my broad classnames and inline code aren't ideal (this is a quick extraction from a bigger chunk of code), I have another issue. </p> <p>In IE7 and IE 6, when you hover over the label, the color changes as expected. However, when you select the checkbox and hover away, the color doesn't change to the 'selected' class's background color until you do something like click away in white space or another element on the page.</p> <p>Go and unselect the checkbox, and the selected color is again residual until you click away. Adding a switch to toggleClass doesn't change the problem.</p> <p>Of course this works as expected in modern browsers such as Chrome and FF. Any idea what is happening here?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload