One of the nicer features of Spry is the simple way you can apply even, odd, and hover classes to a dataset. Consider this example:
<tr spry:repeat="mydata" spry:setrow="mydata" spry:hover="hover" spry:even="even" spry:odd="odd">
<td style="cursor: pointer;">{name}</td>
<td style="cursor: pointer;">{age}</td>
<td style="cursor: pointer;">{gender}</td>
</tr>
This code will tell Spry to apply a CSS class named even for even rows, odd for odd rows, and to notice a mouse over event on a row and apply the hover class. For some reason though I couldn't ever get this to work with the following CSS:
<style>
.hover {
background-color: yellow;
}
.even {
background-color: red;
}
.odd {
background-color: blue;
}
</style>
Yes, I mixed blue, red and yellow. This is why I don't design web sites. Anyway, this never worked correctly for me. Luckily for me (not so much for them), I've got the Spry team on speed dial. Turns out this was a problem with my lack of knowledge of CSS. Kin Blas had this to share:
The 3 rules above all have equal specificity so if you have an element with more than one class on it like this:<div class="even hover">
The last one defined in the CSS wins ... so in the above example the div would be red even when you hover over it. If you want hover to be more specific, then you have to change the order:
.even { background-color: red }
.odd { background-color: yellow }
.hover { background-color: blue }
When I switched the order - it worked perfectly.