有没有办法在悬停在父标签上时选择子标签？答案

【问题标题】：Are there any ways to select a child tag while hovering on parent tag?有没有办法在悬停在父标签上时选择子标签？
【发布时间】：2020-10-19 08:10:49
【问题描述】：

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

HTML：

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

如果我使图像成为父 div 的直接子元素，则在悬停时，图像会改变它的位置，就像它正在远离鼠标一样，但之后图像将不会被视为悬停，所以它会回到它是最后一个位置，之后它将被视为一次又一次悬停，所有这些都发生在我将鼠标悬停在 div 上一次时。

但是如果我在选择父 div:hover 的同时选择子 div，我可以在不改变专利 div 的位置的情况下移动子 div

有什么想法吗？

【问题讨论】：

标签： html css css-selectors hover

【解决方案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*/
}

【讨论】：

只是一个注释，引用 id 的使用 # 而不是点！所以它会是#outer 和#inner

【解决方案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>

【讨论】：