Can't determine what selector to use on td inside of table inside of div
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");
});
$('#columnDay开发者_开发百科1').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?
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
Try:
$('#columnDay1 .calendarHeader').css('background-color');
I think you are missing a space between the selectors
Because contentColumnDay1
is a class, you can't use #contentColumnDay1
(# is for id), use .contentColumnDay1 td.calendarHeader
instead.
精彩评论