要在一個元素懸停時影響其他元素，一個元素應該位于另一個元素內，即父子元素或同級元素。將鼠標光標放在一個元素上時，另一個元素的屬性應該發生變化，即懸停效果可見。
當一個元素懸停時更改另一個元素的顏色
示例
在此示例中，我們將在鼠標懸停時更改 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中被懸停時，如何影響其他元素？的詳細內容，更多請關注www.92cms.cn其它相關文章！
