Question

我想创建一个表格，其中悬停在一行上会为该行显示一些按钮。现在，我总是有按钮（实际上只是文本），当表格行悬停在上面时，我将按钮的可见性从隐藏更改为可见。但是，即使事件实际上在tr上，hover事件似乎也不会触发隐藏的td元素。我怎样才能解决这个问题？我不想将不透明度设置为0，因为它们仍然可以被点击（对吗？）。最终我希望能够通过添加/删除类来打开和关闭悬停效果，这就是不透明度不起作用的原因。

我的代码如下所示：http://jsfiddle.net/h7oh9xvk/

HTML：

<table>
    <tr><td class='precell'>X</td><td>blablabla</td><td class='postcell'>[edit]</td></tr>
    <tr><td class='precell'>X</td><td>blablabla</td><td class='postcell'>[edit]</td></tr>
    <tr><td class='precell'>X</td><td>blablabla</td><td class='postcell'>[edit]</td></tr>
</table>

CSS：

.precell, .postcell {
    visibility: hidden;
}
tr:hover .precell {
    visibility:visible;
}
tr:hover .postcell {
    visibility:visible;
}

编辑：附加信息：其中一个主要问题似乎是行中td元素之间的空间似乎不算作行的一部分（不会触发行上的悬停事件）。当我将鼠标从一个单元格水平移动到另一个单元格时，似乎在悬停“关闭”的td之间存在空格。有办法阻止这个吗？这可能会解决问题。

Answer 1

您可以使用display: none / display: table-cell：

＆＃13;

table {
    table-layout: fixed;
}
.precell, .postcell {
    display: none;
    width:0px;
}
tr:hover .precell {
    display: table-cell;
}
td {
    display: inline-block;
    float:left;
}
tr:hover .postcell {
    display: table-cell;
}
tr, td {padding:0px;}

＆＃13;

<table>
    <tr>
        <td class='precell'>X</td>
        <td style="margin-left:15px;">blablabla</td>
        <td class='postcell'>[edit]</td>
    </tr>
    <tr>
        <td class='precell'>X</td>
        <td style="margin-left:15px;">blablabla</td>
        <td class='postcell'>[edit]</td>
    </tr>
    <tr>
        <td class='precell'>X</td>
        <td style="margin-left:15px;">blablabla</td>
        <td class='postcell'>[edit]</td>
    </tr>
</table>

＆＃13;

@Mary Melody评论后更新。

Answer 2

似乎根本无法以我想要的方式触发悬停事件，但事实证明这是一个简单的解决方案。如果我们在td中包含一个div，并对其采取行动，那么它可以完美地运行：

.precell, .postcell {
  visibility: hidden;
}
tr:hover .precell {
  visibility:visible;
}
tr:hover .postcell {
  visibility:visible;
}

<table>
  <tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr>
  <tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr>
  <tr><td> <div class='precell'>X</div></td><td>blablabla</td><td> <div class='postcell'>[edit]</div></td></tr>
</table>

tr：hover不会触发不可见的td

2 个答案: