html - 悬停在单元格上时显示弹出窗口 - 没有javascript

Question

我想在鼠标悬停在单元格上时显示弹出窗口

.cell:hover + .popup {
  display: block;
}

但这行不通。它仅在我将鼠标悬停在孔表上时才起作用。你能解释一下为什么吗？这对我来说很奇怪，因为两者都是类。我不想使用 javascript。

.table{
    margin:auto;
    display:table;
    width:800px;
    background-color:lightblue;
    border-collapse:collapse;
}
            
.row
{
    display:table-row;
}
            
.cell
{
    display:table-cell;
    height: 20px;
    padding: 4px;
    border:1px solid black;
}
            
.cell:hover {
    background-color: #ff0000;
}
            
.popup {
    display: none;
}
            
.table:hover + .popup {
    display: block;
}

<div class="table">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
</div>

<div class="popup">Stuff shown on hover</div>

Answer 1

您正在使用 adjacent sibling selector , +。由于 .popup 不是任何 .cell 的 sibling ，因此不会发生任何事情。

现在，您的其他规则 .table:hover + .popup 起作用了，因为 popup 元素是您的表的同级元素。如果您希望单元格悬停在不更改 HTML 的情况下工作，则必须使用 JavaScript - there are no parent selectors in CSS .