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>

私の最善の努力にもかかわらず、これまでのところ私のcoffeescriptファイルにはこれしかありません：

$ ->
  $('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]:hovercss ではうまく機能しません。tr非スタイリング css セレクターとして.js-red-row を追加します。

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


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