html - 将 a 与 a 内的另一个重叠我有一个如下所示的表格。 <table> <tr> <td class="selected plus"><a>+</a></td> <td><a class="minus">-</a></td> </tr> </table&g

Question

我有一个如下所示的表格。

<table>
    <tr>
        <td class="selected plus"><a>+</a></td>
        <td><a class="minus">-</a></td>
    </tr>
</table>

我希望只有选定td的内容可见。我的限制是只能通过CSS. 我无法更改HTML或注入某种JavaScript.

这是我想出的：

• 将所选td内容置于另一个之上
• 展开所选td以“取代”另一个
• 隐藏未选中的td

不幸的是，这些想法我都没有成功，所以你们知道如何实现这一目标吗？

这是一个可以玩的 jsfiddle：http: //jsfiddle.net/u6n7r/6/

我会对跨浏览器解决方案感到满意，但 IE9 支持是强制性的。

Answer 1

只需隐藏<td/>with display: none：

td:not(.selected) { display: none; }

这是您的小提琴的更新

Answer 2

相对放置表格。定位 td 的绝对值，top:0 和 left:0。给 td 的 z-index 为 10。给 .selected 的 z-index 为 11。

.selected {
    background-color: green;
    z-index: 11;
}

.plus {

}

.minus {

}

td {
    width: 30px;
    height: 30px;
    border: 3px solid red;
    background-color: silver;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
table {
    border: 3px solid blue;
    width: 72px;
    height: 36px;
    position: relative;
}