Question

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

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

但这不起作用。只有当我将鼠标悬停在孔洞上时才会工作。你能解释一下为什么吗？这对我来说很奇怪，因为两者都是课程。我不想使用javascript。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

现在，您的其他规则.table:hover + .popup有效，因为弹出元素是您的表的兄弟。如果您希望单元格悬停工作而不更改HTML ，则必须使用JavaScript - there are no parent selectors in CSS。

Answer 2

@chazsolo关于兄弟选择器是正确的。但是，您仍然可以在.popup类div内移动.row类div，而不是使用JavaScript，这样它就是.cell元素的兄弟，然后使用CSS将弹出窗口定位在屏幕上的任何位置。例如，像：

.popup {
  display: none;
  position: fixed;
  top: 30%;
}

正如@chazsolo建议的那样，您还需要从使用+兄弟选择器切换到使用~兄弟选择器，因此可以通过将鼠标悬停在任何{{1}上来激活弹出窗口元素。

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

2 个答案: