我试图将子“ div”标签悬停在父“ div”标签上,而子标签中包含图片。
HTML:
<div id="outer">
<div id="inner>
<img href="image.png">
</div>
</div>
如果我将图像作为父div的直接子对象,则在悬停时,图像会更改其位置,就像它远离鼠标一样,但之后该图像将不被视为悬停,因此它将返回到它是最后一个位置,之后它将被视为一次又一次地悬停,而当我将鼠标悬停在div上一次时,所有这些都会发生。
但是如果我在选择父div:hover时选择了子div,则可以在不改变Patent div位置的情况下移动子div
有什么想法吗?
答案 0 :(得分:0)
<div id="outer">
<div id="inner>
<img href="image.png">
</div>
</div>
要实现您的意思,可以使用此CSS。
#outer:hover #inner {
/*your css for #inner while #outer is hovered*/
}
答案 1 :(得分:-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>