проблема в рельсах с циклом по классам в CSS и onmouseover, onmouseout

у меня есть этот код в моем 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>  

как часть таблицы, и этот связанный css:

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

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

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

Суть в том, чтобы сделать таблицу с интерактивными строками, нечетными и четными строками разных цветов, а при наведении курсора они приобретают третий цвет. Проблема заключается в циклической части кода, если я поместил только один цикл в class="‹%= cycle('odd', 'even') %>", все работает нормально, у меня есть нечетные и четные ряды разных цветов, но когда я перехожу мышью, а затем выхожу из нее, значение класса остается тем, которое установлено onmouseover="this.className='over';". Поэтому я решил использовать onmouseout="this.className='‹%= cycle('odd', 'even')%>';" следующим образом:

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

И вот проблема! Каждый из цикла перестает работать, и я всегда устанавливаю класс как первый из двух параметров в цикле. Есть идеи? Может баг? Или какая-то несовместимость браузера? Мне нужно, чтобы это работало в Chrome. Спасибо всем за любое предложение