當嵌套
CSS 解決方案
在不使用 JavaScript 的情況下實現此行為需要巧妙的解決方法使用兄弟元素。
<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;
}
.sibling {
position: relative;
width: 100px;
height: 100px;
padding: 50px;
top: -50px;
left: -50px;
background: #3D6AA2;
transition: background-color 1s;
}
.sibling:hover {
background: #FFF;
}</code><code class="html"><div class="parent">
<div class="sibling"></div>
<div class="child"></div>
</div></code>兄弟元素技巧
兄弟元素絕對定位在父元素內，並與父元素和子元素重疊元素。它超出了父元素的範圍，可以有效捕捉所有不專門針對子元素的懸停事件。
當兄弟元素懸停時，其背景顏色變為白色，從而在視覺上消除父元素的懸停效果。當子元素懸停時，其本身的懸停效果仍然存在，但白色同級元素隱藏了父元素的懸停效果。
近期進展
請注意 :has( ) 選擇器現在存在，可以根據特定後代的存在直接定位父元素。這種方法可以用來更優雅地實現所需的行為。
<code class="css">.parent:has(.child:hover) {
background: lightgray !important;
}</code>以上是將滑鼠懸停在子元素上時如何暫停父元素懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
