嵌套DIV：當子項懸停時禁用對父項的懸停效果
在此場景中，您有兩個嵌套DIV 元素，標記為“ .parent”和“.child”。將滑鼠懸停在“.parent”上時，您希望更改其背景顏色。但是，將滑鼠懸停在“.child”上時，您希望“.parent”恢復為預設的灰色背景。
父級和子級懸停效果的CSS 代碼：
<code class="css">.parent {
width: 100px;
height: 100px;
padding: 50px;
background: lightgray;
}
.parent:hover {
background: lightblue;
}
.child {
height: 100px;
width: 100px;
background: darkgray;
}
.child:hover {
background: lightblue;
}</code>問題：
問題：上面的CSS 代碼成功地將所需的懸停效果應用於「.parent」和「.child」。但是，它沒有解決當“.child”懸停時禁用“.parent”懸停效果的要求。
使用同級元素的解決方案：在「.sibling」中加入與應用於「.parent」相同的背景顏色過渡效果。
<code class="css">.parent {
... (unchanged)
}
.child {
... (unchanged)
}
.sibling {
position: relative;
width: 100px;
height: 100px;
padding: 50px;
top: -50px;
left: -50px;
background: #3D6AA2;
transition: background-color 1s;
}
.sibling:hover {
background: #FFF;
}</code>使用Sibling 元素更新了CSS：
以上是將滑鼠懸停在嵌套 DIV 中的子元素上時如何防止父級懸停效應？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
