Question

i have this code in my index.html:

<div id="users-list">
<tr class="<%= cycle('odd', 'even') %>" onmouseover="this.className='over';" onclick="location.href='<%= user_path(user) %>'" >

<td><%= user.surname %></td>
<td><%= user.name %></td>

</tr>
</div>  

as part of a table, and this associated css:

#users-list  .odd {
    background: #00ffff;
}

#users-list .even {
    background: #ffffff;
}

#users-list .over {
    background: #00ccff;
}  

The point is to make a table whit clickable rows, whit odd and even rows of differents colors, and when mouse over they get a third color. The problem is in the cycle part of the code, if i put only one cycle in the class=”<%= cycle(‘odd’, ‘even’) %>” all is working fine, i have odd and even rows of differents colors, but when i go over and then out whit mouse, class value is still the one setted by onmouseover=”this.className=’over’;”. So i decided to use the onmouseout=”this.className='<%= cycle(‘odd’, ‘even’)%>’;” like this:

<tr class="<%= cycle('odd', 'even') %>" onmouseover="this.className='over';" onmouseout="this.className='<%= cycle('odd', 'even')%>';" onclick="location.href='<%= user_path(user) %>'" >  

And here is the problem! Each one of cycle stop working, and i have the class setted always as the first of two parameters in the cycle.
Any idea? Maybe a bug? Or some browser incompatibility? I need to make this work on Chrome. Thanks all for any suggestion

Answer 1

Each call to cycle switches the class name. You have 2 calls in this line, which will result in odd value for one, and even for the second.

You should use current_cycle in the second call (onmouseout).