我怎样才能使这个 CSS 弹出窗口工作？

Question

我无法找到此弹出窗口不起作用的原因。 他认出了桌子上方的悬停，但它对弹出窗口没有影响。 奇怪的是，当我将表的路径包含到 .popup 类时，他不会做任何事情，甚至不会修改跨度本身。我认为它与选择器有关，但路径在没有 span.popup 的情况下有效。我不明白这个问题，因为空间意味着后代，但它以某种方式杀死了整个选择。

<div id="center">
<tr id="name">
<td class="description">Name</td>
<td>Hulu</td>
<span class="popup">
    This should be the text in the popup.
</span>
</tr>
</div>

----------css

div#center tr.name:hover {
    background-color:   white;
}

div#center tr#name span.popup {
    display:            none;
}

div#center tr#name:hover span.popup {
    display:        block;
    background:     white;
    border-style:   solid;
    border-width:   1px;
    border-radius:  15px;
    position:       absolute;
    top:            45%;
    left:           550px;
    padding:        20px;
    width:          450px;
}

我会很高兴得到一些答案。

一圈

Answer 1

你不能有没有 table 标签的 tr 标签。此外，您不能在 tr 内的 td 标记之外有多余的标记，以使它们有效。这些都没有被认可。如果您将表格标签放在表格行周围，并将跨度放在 td 内，那么它或多或少会按您的意愿工作。而不是以这种方式使用表格行，有什么理由不使用两个 div？