Question

I’m having trouble determining what selector to use access the CSS properties. Here’s my code:

My jquery:

<script type="text/javascript">
    $(document).ready(function () {
        $('#columnDay1').css('cursor', 'pointer');
        $('#columnDay1').mouseover(function () {
            $('td.calendarHeader').css("background-color", "#a43802");
        });
        $('#columnDay1').mouseout(function () {
            $('td.calendarHeader').css("background-color", "#37322e");
        });
    });
</script>

My html:

<div class="contentColumnDay1">
<table cellpadding="0" cellspacing="0" id="columnDay1">
    <tr>
        <td class="calendarHeader">
            <p><span class="dayHeader">Day 1</span><br />August 15, 2011</p>
        </td>
    </tr>
    <asp:Label runat="server" id="labelDay1"></asp:Label>
</table>

I’m trying to access the .calendarHeader CSS property background-color. I have tried #columnDay1.calendarHeader and it does not work. I’m banging my head on the desk.

Any help?

Answer 1

instead of

$('#columnDay1').mouseover(function () {
    $('td.calendarHeader').css("background-color", "#a43802");
});

try

$('#columnDay1').mouseover(function () {
    $('td.calendarHeader', this).css("background-color", "#a43802");
});

td.calendarHeader will reference every td of class “calendarHeader”. You need to give it a context of this or $(this) to specify that you only want to find the td.calendarHeader inside of the element that you just mouseovered. Alternately, you could do $(this).find('td.calendarHeader').css