Question

我有一个不同单元格大小的表。我试图制作像我悬停在一个单元格中的东西，只有一行中的前一个单元格会突出显示。

从示例中您将看到Item + Item a + item j具有灰色背景，它解释了我现在正在盘旋＆＃34;项目j＆＃34;以及前面的单元格也会突出显示。

如果我将鼠标悬停在项目b上，它会突出显示项目b，项目a和项目。如果我将鼠标悬停在第一个单元格项目上，它将仅突出显示项目，因为没有前一个单元格。

对于第1项，第2项和第3项也是如此。

我不擅长jQuery，因为我没有构建任何逻辑来创建它。

如果有人帮我这个对我有帮助的话。

HTML

<table class="table-style" width="100%" border="0" cellspacing="0" cellpadding="0" >
       <tr>
         <td class="active" rowspan="4"><p><a href="#">Item</a></p></td>
         <td ><p><a href="#">Item 1</a></p></td>
         <td ><p><a href="#">Item 2</a></p></td>
         <td ><p><a href="#">Item 3</a></p></td>
      </tr>
      <tr>
         <td class="active" rowspan="3"><p><a href="#">Items a</a></p></td>
         <td class="active" rowspan="3"><p><a href="#">Items b</a></p></td>
         <td ><p><a href="#">Items i</a></p></td>
      </tr>
      <tr>
        <td class="active"><p><a href="#">Items j</a></p></td>
      </tr>
      <tr>
        <td><p><a href="#">Items k</a></p></td>
      </tr>
  </table>

CSS

.table-style{
    margin-bottom:15px;
}

.table-style td{
    border-collapse: collapse;
    border: 1px solid #ddd;
    text-align: center;
    padding: 5px 0px;
}

.table-style td p {
    font-size: 13px;
    color: #454545;
    font-weight: normal;
}

.table-style td p a {
    color: #8d8d8d;
    text-decoration:none;
}

.table-style td.active{
    background: #ddd;
    border: solid 2px #C9C9C9;
}

.table-style td.active p a{
    color: #000;
    font-weight:bold;

}    

.table-style td p a:hover {
    color: #000;
    text-decoration:underline;
}

[抱歉我的英语不好]

Answer 1

我已经修改了你的小提琴，现在它可以在这里工作：http://jsfiddle.net/BHVv6/4/

您的表格单元格以奇怪的方式组织，很难清楚地知道父母是谁，所以我必须使用以下方法手动绘制父结构：

parentMap = {
    "itemOrig": false,
    "item1": "itemOrig",
    "item2": "item1",
    "item3": "item2",
    "itemI": "itemB",
    "itemJ": "itemB",
    "itemK": "itemB",
    "itemB": "itemA",
    "itemA": "itemOrig"
};

Answer 2

您可以定义一个类，该类可以应用于所有以前的表格单元格，如下所示：

<强>的jQuery

$('.table-style td').hover(
    function(){
        $(this).prevAll().addClass('hover');
    }, 
    function(){     
        $(this).prevAll().removeClass('hover');
    }
);

<强> CSS

.hover{font-weight: bold} /* or whatever  the "highlighting needs to be */

将鼠标悬停在一个表格单元格中将突出显示一行中的前一个单元格

2 个答案: