0

私を困惑させた問題に遭遇しました。ユーザーがカーソルをテーブルの上に置いたときに、テーブルの行の境界線の色を変更したいと思います。

これが私のjQueryです：

$(document).on('hover', '.song', function()
{
    $(this).toggleClass('highlightRow');
});

これが私のhtmlです：

<table border="1" style="padding-top:0px; margin-top:0px;">
    <tr class="song"><td>test1</td></tr>
    <tr class="song"><td>test2</td></tr>
    <tr class="song"><td>test2</td></tr>
</table>

これがcssクラスです：

.highlightRow
{
   cursor: pointer;
   border: 2px solid red;
}

Chromeで完全に機能します。Firefoxでは、カーソルがポインタに変わるため、クラスが切り替わりますが、境界線の色が変わることはありません。そのためにjsFiddle（http://jsfiddle.net/5a9k2/7/）を作成しましたが、正常に動作します。これがFirefoxで機能しない理由を誰かに教えてもらえますか？

編集： 回答以下の回答のおかげで、TRには境界線を付けることができないことに気づきました。そうは言っても、動的要素で機能し続ける必要があり、ホバーしたものだけでなく、行のすべてを強調表示したかったので、機能した最後のJSは次のとおりです。

$(document).on('hover', 'tr.song', function()
{
    $(this).children().toggleClass('highlightRow');
});
4

2 に答える 2

2

「tr」に境界線を適用することはできません。代わりに「td」を試してください。

編集

jQueryコードを次のように置き換えます。

$("tr.song td").hover(function(){
    $(this).addClass("highlightRow");
},function(){
    $(this).removeClass("highlightRow");        
});
于 2011-11-22T21:14:24.877 に答える
0

境界線のCSSは次のようになります。border：2px solid red;

From：http ://www.w3schools.com/css/css_border.asp borderプロパティを使用する場合、値の順序は次のとおりです。

border-width
border-style
border-color

残りが指定された順序である限り、上記の値の1つが欠落しているかどうかは関係ありません（ただし、border-styleが必要です）。

于 2011-11-22T21:01:33.287 に答える