JQuery Hover does not work Mozilla

Question

I have the following Snippet of code.The hover has a problem in Mozilla - It changes color on hover but some times it does not revert back when we go out.Mind you it only happens sometimes.Also in such cases if I examine the HTML using FireBug I can see that the Extra Class is assigned even after hover is out.It works OK on IE .This is a simplified version

Also as you can see I am setting color on the TR.But this does not change the Color on TextBoxes inside TR. How can I make sure the background color of the Controls contained in the TR is also changed on hover.

 <style type="text/css">
        .HighLight
        {
            background-color:Fuchsia;
        }
        .Select
        {
            border:soild 2px Blue;
            margin:3px;
        }
        </style>
    <script type="text/javascript" src="jquery-1.4.2.js">

    </script>
    <script type="text/javascript">
        $(function() {
        $(".Select").hover(
            function() {
                $(this).addClass("HighLight");
            }, 
            function() {
                $(this).removeClass("HighLight");
            });
        });

My Markup generated by ASP.NET Repeater Control is a table with TR assigned Class Select.

<tr class="Select" >
<td>
<input  type="checkbox" id="chkSelect" />
</td>
<td>
<input name="Repeater1$ctl11$tb" type="text" value="Sharp Bikes" id="Repeater1_ctl11_tb" />
</td>
<td>
<input name="Repeater1$ctl11$tb2" type="text" value="10/13/2004 11:15:07 AM" id="Repeater1_ctl11_tb2" />
</td>
</tr>

Answer 1

If this code is generated then perhaps the jQuery code doesn't know about it.

You may want to try to use the .live keyword and see what happens.

Also, and this probably won't have an effect, but I like to use $(document).ready( rather than $(function(. Personal preference but I never have these issues.

Answer 2

I'd say try jQuery mouseover (addClass) and mouseout (removeClass) instead

http://api.jquery.com/mouseover/

Good luck,

Flavio

Answer 3

you can use Firebug in Firefox to know where is the problem.

and you need to put your table tags, like this

Answer 4

Good news! I was able to recreate your bug!

The problem is your jquery selector is grabbing all elements with the class "Select". During hover, you append the class "Highlight", so for a microsecond, jQuery is rewriting the class definition for that element and will occasionally drop it from the select rule.

Try changing your jQuery select from:

$(".Select").hover(...

to:

$("tr[class~='Select']").hover(...

or better yet, change the insides of your hover function to directly affect the element style:

//...
function(){
  $(this).css('background',"fuchsia");
},
function(){
  $(this).css('background',''); //removes rule
}
//...

..Seriously? Fuscia?!