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成为它们的父级。

CSS-悬停在li a上

1 个答案: