要在一個(gè)元素懸停時(shí)影響其他元素，一個(gè)元素應(yīng)該位于另一個(gè)元素內(nèi)，即父子元素或同級(jí)元素。將鼠標(biāo)光標(biāo)放在一個(gè)元素上時(shí)，另一個(gè)元素的屬性應(yīng)該發(fā)生變化，即懸停效果可見(jiàn)。
當(dāng)一個(gè)元素懸停時(shí)更改另一個(gè)元素的顏色
示例
在此示例中，我們將在鼠標(biāo)懸停時(shí)更改 div 內(nèi)兩個(gè)框的顏色 –
<!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>
登錄后復(fù)制
當(dāng) div 懸停時(shí)更改按鈕元素的顏色
示例
在此示例中，我們將在 div 懸停時(shí)更改按鈕元素的顏色 –
<!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>
登錄后復(fù)制
以上就是當(dāng)一個(gè)元素在HTML中被懸停時(shí)，如何影響其他元素？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
