Question

我试图将子“ div”标签悬停在父“ div”标签上，而子标签中包含图片。

HTML：

<div id="outer">
    <div id="inner>
        <img href="image.png">
    </div>
</div>

如果我将图像作为父div的直接子对象，则在悬停时，图像会更改其位置，就像它远离鼠标一样，但之后该图像将不被视为悬停，因此它将返回到它是最后一个位置，之后它将被视为一次又一次地悬停，而当我将鼠标悬停在div上一次时，所有这些都会发生。

但是如果我在选择父div：hover时选择了子div，则可以在不改变Patent div位置的情况下移动子div

有什么想法吗？

Answer 1

<div id="outer">
    <div id="inner>
        <img href="image.png">
    </div>
</div>

要实现您的意思，可以使用此CSS。

#outer:hover #inner {
/*your css for #inner while #outer is hovered*/
}

Answer 2

您可以在悬停父级时使用“ #outer：hover #inner”选择内部子级div。我在操作中包括了一些示例。

#outer {
  background: blue;
  width: 100px;
  height: 100px;
}
#inner {
  background: red;
  width: 50px;
  height: 50px;
}
#outer:hover #inner {
  background: purple;
}

<div id="outer">
    <div id="inner">
        <img href="image.png" />
    </div>
</div>

悬停在父标签上时，有什么方法可以选择子标签？

2 个答案: