Question

I know that with CSS, hovering over one elements can’t change the properties of the elements that are nested inside of the given elements. So, I’ve been using jquery to change the properties of the elements that are nested inside of the given elements. My code is as follows:

<?php
    for($i=0;$i<$count;$i++)
    {
?>   
   <tr>
       <td>Sample</td>
       <td>Text</td>
   </tr>
<?php
    }
?>
<script type="text/javascript">
    $(document).ready(function(){

   $('tr').each(function(index) {
        $(this).hover(function() {  
            $(this).css("color", "#ffffff");    
            $(this).css("background-color", "#0080ff");
        });

        $(this).mouseout(function() {   
            $(this).css("color", "#222222");
            $(this).css("background-color", "#f0f0f0"); 
        });
    });
});
</script>

The problem is that once I hover over the tag, I’m triggering the mouseout action, and the font-color is being switched back to #222222, I want it to be so that as long as I’m hovered over the tag or anything in it, the background color of the row is set #0080ff and the font-color is set to #ffffff. Any suggestions?

Answer 1

You need mouseleave as this will be triggered only when the mouse is completely outside the element and not if on the elements children. So

$(this).mouseout(...)

should be

$(this).mouseleave(...)

Alternatively you can simply do

$('tr').each(function(index) {
    $(this).hover(function() {  
        $(this).css("color", "#ffffff");    
        $(this).css("background-color", "#0080ff");
    }, function() {   
        $(this).css("color", "#222222");
        $(this).css("background-color", "#f0f0f0"); 
    });
});

which actually binds the first function as the mouseenter handler and the second as the mouseleave handler.