Javascript/Coffeescript 鼠标悬停在函数 RoR

Posted 2023-03-03

【中文标题】Javascript/Coffeescript 鼠标悬停在函数 RoR

【英文标题】：Javascript/Coffeescript mouse over function RoR

【发布时间】：2013-01-20 17:23:20

【问题描述】：

我有一个显示工作列表的表格。我想要发生的是整行（不是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 或咖啡脚本提供任何建议，我们将不胜感激。谢谢！

【问题讨论】：

也添加mouseout事件！！！

感谢您的帮助，我们也添加了 mouseout 事件，该事件有效。你知道我怎样才能让它只突出显示正在悬停的表格行而不是表格中的所有 td 吗？抱歉新手问题

查看this 对另一个问题的回答。

我强烈建议您使用<tr data-href="..."> 而不是<tr href="...">，表格行没有href 属性，而且您永远不知道浏览器会如何处理无效的 html。

【参考方案1】：

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

tr[href]:hover 
    color: red

【讨论】：

嗨，Marcel，我只是在简单的 CSS 中尝试了这个，但似乎无法让它工作。您知道我在 Javascript 中隔离行的最佳方法吗，因为除了突出显示所有 td 而不仅仅是我需要的行之外，它现在都在工作。谢谢！

@TomPinchen：它只适用于我只使用这个 CSS 规则，但如果你真的想使用 JavaScript 做到这一点，只需点击 Paul Hoenecke 的链接。

对不起，我设法让它与 table tr:hover color:red 一起工作，所以一切都很好 - 谢谢你的帮助 :)

【参考方案2】：

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

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


# css    
tr > td color: black;
.red color: red;