要在一个元素悬停时影响其他元素，一个元素应该位于另一个元素内，即父子元素或同级元素。将鼠标光标放在一个元素上时，另一个元素的属性应该发生变化，即悬停效果可见。
当一个元素悬停时更改另一个元素的颜色
示例
在此示例中，我们将在鼠标悬停时更改 div 内两个框的颜色 –
.parent { width: 500px; height: 150px; background-color: orange; } .child { margin-left: 39px; width: 100px; height: 40px; background-color: blue; color: white; } div { border: 3px solid red; } .parent:hover .child { background-color: green; } Change the color
Keep the mouse cursor inside the orange colored div to change the color of the two blue boxes.
In the div Box1
Box2
当 div 悬停时更改按钮元素的颜色
示例
在此示例中，我们将在 div 悬停时更改按钮元素的颜色 –
立即学习“前端免费学习笔记（深入）”；
body { text-align: center; } .parent { width: 600px; height: 200px; background-color: blue; } .child { width: 30px; height: 30px; background-color: grey; } div { outline: 1px solid black; } .parent:hover .child { background-color: yellow; } .child { background-color: orange; border: none; padding: 50px 80px; margin-top: 40px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } Change the color
Keep the mouse cursor inside the blue colored div to change the color of the orange box to yellow.
以上就是当一个元素在HTML中被悬停时，如何影响其他元素？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551847.html
微信扫一扫 
支付宝扫一扫 
