如何通过将<div>鼠标悬停在 S 上来切换/动画<a>



所以。我有一个对象。如果我悬停它,我想切换动画或只是下面div 的 css 更改。

我只想使用HTML和CSS,而不是Javascript或其他东西。

您可以在"代码"部分找到该结构。

感谢您的帮助:)

<body>
<div>
<a ← THIS IS THE OVER OBJECT>
<div ← THIS IS THE DIV I WANNA ANIMATE>
stuff
</div>
</div>
</body>

您可以使用相邻的同级选择器(请注意,在这种情况下,div必须紧跟在a之后(:

a:hover + div { background: blue } /* this is all that really matters */
<a href='#'>HOVER ME</a>
<div>I AM A DIV</div>

如果adiv之间有另一个元素,但他们仍然是兄弟姐妹,您需要使用~而不是+

首先,您需要为锚元素添加一个结束标记。之后,您可以通过执行以下操作将最里面的div 设置为将鼠标悬停在锚点标签上时进行动画处理:

a:hover div{
//Animation code here
} 

最新更新