要在一个元素悬停时影响其他元素,一个元素应该位于另一个元素内,即父子元素或同级元素。将鼠标光标放在一个元素上时,另一个元素的属性应该发生变化,即悬停效果可见。
在此示例中,我们将在鼠标悬停时更改 div 内两个框的颜色 -
<!DOCTYPE html> <html> <head> <style> .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; } </style> </head> <body> <h1>Change the color</h1> <p> Keep the mouse cursor inside the orange colored div to change the color of the two blue boxes.</p> </h3> <div class="parent">In the div <div class="child"> Box1 </div> <br> <div class="child"> Box2 </div> <br> </div> </body> </html>
在此示例中,我们将在 div 悬停时更改按钮元素的颜色 -
<!DOCTYPE html> <html> <head> <style> 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; } </style> </head> <body> <h1>Change the color</h1> <p> Keep the mouse cursor inside the blue colored div to change the color of the orange box to yellow.</p> </h3> <div class="parent"> <button class="child"> Box </button> </div> </body> </html>
以上就是当一个元素在HTML中被悬停时,如何影响其他元素?的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号