Javascript / Coffeescript mouse over RoR function
I have a table that shows a list of tasks. I would like the text of the entire line (not the td) to change color to red when it hovers, and then back to black when the mouse was removed.
I currently have the following table:
<section id="table-wrapper">
<table id="jobs">
<thead>
<tr>
<td>position</td>
<td>company</td>
<td>location</td>
</tr>
</thead>
<% @jobs.each do |job| %>
<tr href='<%= job.job_url %>'>
<td><%= job.title %></td>
<td><%= job.company %></td>
<td><%= job.city %>, <%= job.country %></td>
</tr>
<% end %>
</table>
</section>
and despite my best efforts so far this is still in my coffeescript file:
$ ->
$('tr[href]').mouseover -> $('tr td').css('color', 'red');
This currently turns all TD elements red on hover, regardless of the row they are in, and they do not revert to black when the mouse is removed.
Any advice people have to offer in either Javascript or coffee script would be much appreciated. Thank!
You can simply do it with CSS:
tr[href]:hover {
color: red
}
Don't use mouseover()
, use hover()
. The selector tr[href]:hover
won't work perfectly in css. Add .js-red-row to you tr
as a no-styled CSS selector.
$ ->
$('tr.js-red-row td').hover -> $(this).toggleClass('red')
# css
tr > td {color: black;}
.red {color: red;}