Question

我创建了一个表格，其中第一个<tr>有两个<td>（第一个有rowspan），第二个<tr>只有一个<td>。当我将鼠标悬停在第二个<td>的{{1}}上以影响自身以及第一个<tr>的第一个<td>时，我希望这样。

这与我想要的类似：http://jsfiddle.net/M3Wya/

这是代码：

<tr>

如果我在B上悬停，我希望A和B改变（它适用于<table class="class"> <tr><td rowspan="2">A</td><td>B</td></tr> <tr><td>C</td></tr> </table>），如果我在C上悬停，我希望A和C以同样的方式改变。

有可能只使用CSS吗？我不知道怎么做（我知道兄弟选择器，但我在这里找不到如何使用它。

如果用CSS无法实现，我怎么能用JavaScript做呢？

这是解决方案：

http://codepen.io/anon/pen/cGhwL

Answer 1

单独使用css将无法执行此操作。我找不到一个好的通用JavaScript解决方案，所以我在jquery中创建了以下内容。希望它有所帮助：

http://jsfiddle.net/UJeCt/1/

$("td").hover(function(){
    var $this = $(this);
    var $thisTr = $this.closest("tr");
    var $rows = $thisTr.parent().children();

    // add hover to call cells directly in the same tr
    $thisTr.find("td").addClass("hover");

    // add hover to any td with rowspan making it visually part of this row
    var rowIndex = $rows.index($thisTr[0]);

    $thisTr.prevAll("tr:has(td[rowspan])").each(function(){
        var index = $rows.index(this);

        $(this).find("td[rowspan]").each(function(){
            var $cell = $(this);

            if($cell.attr("rowspan") > rowIndex - index){
                 $cell.addClass("hover");   
            }
        });
    });
}, function(){
    $(".hover").removeClass("hover");
});

Answer 2

你可以让CSS成为第一个选择器

table.class:hover tr:first-child { 
  /* something */
}

悬停在td影响优越的tr

2 个答案: