*
*I would do it this way
<style>
td {
background-color:#FFF;
}
td.hover {
background-color:#AAA;
}
</style>
<script type="text/javascript">
$(function() {
var tableColumn = $("td");
tableColumn.hover(function() {
// on mouse over
$(this).addClass("hover");
}, function() {
// on mouse leave
$(this).removeClass("hover");
});
});
</script>
*EXPLANATION :*
I create a class called *hover*
i create a variable refference every *<td>* tag
on mouse over i add the hover class to the element
on mouse out i remove the hover class from the element
note : if you used the style
td:hover {
background-color:#AAA;
}
IE6 would not recognize this but i try and keep things css controlled where
i can.
On Mon, Jun 29, 2009 at 11:19 PM, Charlie <charlie...@gmail.com> wrote:
> (this) has to stand alone, you can't use it quite the same way as parent
> child in your selector
>
>
> most common way to do it is $("this").find("td").css(......); ///looks for
> td's that are children of (this)
>
> or there's an abbreviated method that isn't shown in many examples
>
> $("td", this).css(...)
>
>
> Coxy wrote:
>
> $('.mainTable > tbody > tr').bind("mouseover", function(){
> // alert('hi');
> //$(this + ' > td').css('background', '#ff0000'); // Didn't work
> $(this + ' td').css('background', '#ff0000'); // Doesn't either
> });
>
> I want to highlight td's in a row when I mouse over the TR's. I set
> the mouseover function using the above code. The alert works when I
> mouse over the row, so I then tried to select the TD children and
> change their bg but it then does nothing.
>
> Did I use this incorrectly? I'm new to jQuery and am still getting
> used to the selectors.
>
> Thanks for any advice.
>
>
>
>
>
>
