欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何讓子div不觸發(fā)父div的懸停效果？

CSS

我試圖找出如何讓一個(gè)具有position: absolute的子元素位于其父元素之外，而不會(huì)觸發(fā)父元素的:hover效果。

因?yàn)楦冈鼐哂袘彝ＰЧ宰釉貙⒂|發(fā)父元素，即使該子元素在父元素的邊界之外。

是我遺漏了什么屬性，還是這就是HTML中繼承的工作方式？

圖片示例:

在這幅圖中，我的鼠標(biāo)光標(biāo)在子div內(nèi)部，但在父div外部。

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  background-color: black;
  width: 800px;
  aspect-ratio: 1 / 1;
}

.container:hover {
  background-color: darkorange;
}

.child {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
  transform: translate(-50px, 0px);
}

<div class="container">
  <div class="child"></div>
</div>

為此，您可以使用以下解決方案。

可以在子元素上使用pointer-events: none。但是請記住，這將阻止所有類型的指針事件，而不僅僅是懸停事件。所以任何種類的點(diǎn)擊事件也不會(huì)在子元素上起作用。

另一個(gè)選擇是在css中使用:has()方法。:has()允許您將滿足傳遞給它的條件的元素作為目標(biāo)。你可以這樣做-

.container:not(:has(.child:hover)):hover {
    background-color: darkorange;
  }

這將防止容器懸停在其子元素上時(shí)出現(xiàn)懸停效果，這是在:has()方法中指定的。 下面是演示這種方法的JSFiddle示例。 在此閱讀更多關(guān)于:has()的信息

可以添加指針-事件:無；這使得它不會(huì)觸發(fā)任何鼠標(biāo)事件，包括鼠標(biāo)懸停。

<!DOCTYPE html>
  <head>    
    <style>
       body { 
         display: flex; 
         align-items: center;
         justify-content: center; 
       } 
       .container { 
         background-color: black;
         width: 800px; 
         aspect-ratio: 1 / 1;
       } 
       .container:hover { 
         background-color: darkorange; 
       } 
       .child {
         position: absolute; 
         background-color: red; 
         width: 100px;
         height: 100px;
         transform: translate(-50px, 0px);
         pointer-event: none;
       }
   </style>
 </head> 
<body> 
  <div class="container">        
    <div class="child"></div>   
  </div> 
</body>