當一個元素在HTML中被懸停時，如何影響其他元素？
- WBOY轉載
- 2023-09-10 22:53:071485瀏覽
要在一個元素停留時影響其他元素，一個元素應該位於另一個元素內，也就是父子元素或同級元素。將滑鼠遊標放在一個元素上時，另一個元素的屬性應該會發生變化，即懸停效果可見。
當一個元素懸停時更改另一個元素的顏色
範例
在此範例中，我們將在滑鼠懸停時更改 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中被懸停時，如何影響其他元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除