2

ここで興味深い問題があります。

いくつかのセルを含むテーブルがあり、それらのいくつかは行スパンを持っています:

+----+----+----+----+
|    |    | c4 | cx |
|    | c2 +----+----+
|    |    | c5 | cx |
| c1 +----+----+----+
|    |    | c6 | cx |
|    | c3 +----+----+
|    |    | c7 | cx |
+----+----+---------+

次の CSS では、セル c4、c5、c6、c7 と、行がホバーされたときに対応する cx セルのみが強調表示されるようにします。

tr:hover td:not([rowspan]) {
    background: #F1F1F1;
}

c4 .. c7 をホバーすると魅力的に機能します - セル自体とそれに対応する cx セルだけが新しい背景色を取得します。

c1 から c3 がホバーされると、行 c4 もホバーされます - セレクターを念頭に置いて完全に理にかなっています。問題は、このように動作させたくないことと、停止する方法がわからないことです。

何か案は？リクエストがあれば、フィドルを提供します。

4

2 に答える 2

2

1つのアプローチとして、次のことをお勧めします。

$('td').not('[rowspan]')
.hover(function () {
    $(this)
    .siblings()
    .andSelf()
    .not('[rowspan]').addClass('highlight');
}, function(){
    $(this)
    .parent()
    .find('.highlight')
    .removeClass('highlight');
});

JS フィドルのデモ。

参考文献:

于 2013-06-17T14:24:12.193 に答える