Clever Geek Handbook

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!

+3


source to share


2 answers


You can simply do it with CSS:



tr[href]:hover {
    color: red
}
+3


source


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;}
+2


source






More articles:


All Articles