将鼠标悬停在 parent 标签上时，有什么方法可以 select child 标签吗？

Question

我试图将鼠标悬停在 parent“div”标签上时向上移动 child“div”标签，而 child包含图像。

HTML:

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

如果我将图像设为 parent div 的直接 child，在悬停时，图像会改变它的位置，就像它运行远离鼠标一样，但在那之后图像不会被视为悬停，因此它会回到它的最后一个位置，之后它会被视为一次又一次地悬停，所有这些都发生在我将鼠标悬停在 div一次。

但是如果我 select child div 而 select 正在 parent div:hover，我可以移动 child 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”select 内部子项 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>

将鼠标悬停在 parent 标签上时，有什么方法可以 select child 标签吗？

Are there any ways to select a child tag while hovering on parent tag?

html

css

hover

css-selectors