jQuery on hover addClass

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?

Don't need javascript to do it.

Ricardo Lohmann
– Ricardo Lohmann

2012-10-08 23:59:36 +00:00
Commented Oct 8, 2012 at 23:59 — Ricardo Lohmann
– Ricardo Lohmann, Commented Oct 8, 2012 at 23:59

VKen · Accepted Answer · 2012-10-08 23:28:23Z

2

I think you can target the elements inside the object being hovered using CSS.

In your case:

tr {
    color: #222;
    background-color: #f0f0f0;
}

tr:hover {
    color: #fff;
    background-color: #0080ff;
}

Here's the jsfiddle

It looks like what your javascript is doing - changing CSS properties. Am I interpreting your question correctly?

answered Oct 8, 2012 at 23:28

VKen

5,0245 gold badges35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Willem Over a year ago

For more complex html structures where this approach doesn't work, remember that you can continue after the ':hover' part of the selector, as in: tr:hover > td > span.foo {}

Sidharth Mudgal · Accepted Answer · 2012-10-08 23:34:34Z

0

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.

edited Oct 8, 2012 at 23:34

answered Oct 8, 2012 at 23:24

Sidharth Mudgal

4,26422 silver badges25 bronze badges

1 Comment

Lance Over a year ago

Thanks. This works perfectly. I knew that the solutions was something very simple. I just didn't know what.

mbajur · Accepted Answer · 2012-10-08 23:24:13Z

0

You should use the second param of hover(). Your code should look like:

$('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"); 
        });
});

answered Oct 8, 2012 at 23:24

mbajur

4,5195 gold badges54 silver badges85 bronze badges

Collectives™ on Stack Overflow

jQuery on hover addClass

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related