3

我有一个显示工作列表的表格。我想要发生的是整行（不是td）的文本在悬停时将颜色变为红色，然后在移除鼠标时变为黑色。

我目前有下表：

<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>

尽管我尽了最大的努力，但到目前为止我的咖啡脚本文件中只有这个：

$ ->
  $('tr[href]').mouseover -> $('tr td').css('color', 'red');

目前这会将所有 TD 元素在悬停时变为红色，无论它们在哪一行，并且在移除鼠标时它们不会返回黑色。

人们可以用 Javascript 或咖啡脚本提供的任何建议将不胜感激。谢谢！

4

2 回答 2

3

你可以简单地用 CSS 做到这一点：

tr[href]:hover {
    color: red
}
于 2013-02-05T17:47:50.503 回答
2

不使用mouseover()，使用hover()。选择tr[href]:hover器在 css 中表现不佳。添加 .js-red-rowtr作为非样式化 css 选择器。

$ ->
  $('tr.js-red-row td').hover -> $(this).toggleClass('red')


# css    
tr > td {color: black;}
.red {color: red;}
于 2013-02-05T17:55:40.923 回答