当一个元素悬停时更改另一个元素的颜色示例在此示例中，我们将在鼠标悬停时更改 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 悬停时更改按钮元素的颜色示例在此示例中，我们将在 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中被悬停时，如何影响其他元素？的详细内容。