html - CSS - 将鼠标悬停在 li a 上

Question

我在下面有 HTML 和 CSS。

HTML

<ul>
    <li class="liHover">
        <a href="">Hover List</a>
        <div class="square1">
        Square 1
        </div>
    </li>
    <li class="aHover">
        <a href="">Hover Link</a>
        <div class="square2">
        Square 2
        </div>
    </li>
</ul>   

CSS

li {padding:20px; border: solid 1px;margin:5px;}

.square1, .square2 {
  display: none;
  width: 200px;
  height: 100px;
  border: 1px solid red;
}
.liHover:hover .square1 {
  display: block;
}
.aHover a:hover .square2 {
  display: block;
}

实时样本是 here

如果我将鼠标悬停在 li 上，它会起作用，但如果我将鼠标悬停在 li a:hover 上，它就不起作用。

以下代码有效。

.liHover:hover .square1 {
  display: block;
}

但是下面的代码不起作用。

.aHover a:hover .square2 {
      display: block;
    }

我想知道为什么？以及如何让它发挥作用？

Answer 1

这是因为 .square1 或 .square2 都不是任何 a 标签的子标签。 将 .square1 或 .square2 类添加到 a 标记，或者使 a 成为它们的父级。