Hi list,
I stumbled on a problem I could not resolve so perhaps someone can
give some hints.
On my page I have a table:
<table border="0" cellspacing="0" cellpadding="0">
<tr class="even">
<td>abc</td>
<td>abc</td>
</tr>
<tr class="odd" id="itemHighlight">
<td>abc</td>
<td>abc</td>
</tr>
</table>
and the CSS styles:
tr.even {
background: #F1F5F9;
}
tr.odd {
background: #FFF;
}
tr.even:hover, tr.odd:hover {
background: #DADFE4;
}
This highlights the row the cursor currently hovers about and works
flawlessly. In a next step I want a specific row to use the
scriptaculous effect Highlight after the page has loaded. For that
purpose the second row in the example has an id assigned. At the end
of the HTML I included a javascript snippet:
<script type="text/javascript">
new Effect.Highlight('itemHighlight');
</script>
When the page loads the second row is correctly highlighted but then
that row does not respond to the CSS :hover style anymore. If I move
the id from the tr-tag to one of the children td-tags the td is
highlighted and the tr:hover style works, so I think I could set an id
for every children td-tag to make it work but this seems overly
complicated and hackish. Am I doing something wrong?
Thanks in advance!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
