Div無法識別懸停

我設置了一個懸停效果，在我正在處理的網站上顯示一個圖標疊加並過濾instagram feed。當我繼續檢查並將元素狀態設置爲懸停時，它可以很好地工作。但是，當實際使用網站並懸停在圖像上時，懸停效果不會顯示。Div無法識別懸停

爲什麼懸停狀態不被識別？

#insta-feed>a>img, 
 
.ig__overlay--container { 
 
    width: 25vw !important; 
 
    height: 25vw !important; 
 
} 
 

 
.ig__overlay--container { 
 
    left: 0px; 
 
    background-color: rgba(0, 0, 0, 0); 
 
    background-size: 25px 25px; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    pointer-events: none; 
 
    z-index: 300; 
 
} 
 

 
.overlay__container { 
 
    position: absolute; 
 
    pointer-events: none; 
 
    z-index: 300; 
 
} 
 

 
#insta-feed>.overlay__container>div.ig__overlay--container:hover { 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    background-image: url({{ 'icon-socialig-menu.svg' | asset_url }}); 
 
}

<div class="social__container"> 
 
    <div id="insta-feed" style="text-align: center;"> 
 
    <div class="flex flex-row overlay__container"> 
 
     <div class="ig__overlay--container"> 
 
     </div> 
 
     <div class="ig__overlay--container"> 
 
     </div> 
 
     <div class="ig__overlay--container"> 
 
     </div> 
 
     <div class="ig__overlay--container"> 
 
     </div> 
 
    </div> 
 
    <a href="https://www.instagram.com/p/BRGeqnQBXPnlIGev3dRjstsSa6EY7JyaI6rGr00/" target="_blank"><img style="margin:0px;width:150px;height:150px;" title=": @nadavharelsaridphotography #wingatewednesday" src="//scontent.cdninstagram.com/t51.2885-15/s320x320/e35/c0.134.1080.1080/17077242_1932710616958862_1305221706347970560_n.jpg"></a> 
 

 
    <a href="https://www.instagram.com/p/BKEbVi6h6SfC1EelzA6MSgs3REqdtopbUPk1io0/" target="_blank"><img style="margin:0px;width:150px;height:150px;" title="#wingatewednesday" src="//scontent.cdninstagram.com/t51.2885-15/s320x320/e35/c236.0.607.607/14240602_658676340962312_969227444_n.jpg"></a> 
 

 
    <a href="https://www.instagram.com/p/BJye_43BoKkO3nc0ACGnlSVaSda8Swzz5lTkhw0/" target="_blank"><img style="margin:0px;width:150px;height:150px;" title="#wingatewednesday " src="//scontent.cdninstagram.com/t51.2885-15/s320x320/e35/14099287_1751144871820717_364534171_n.jpg"></a> 
 

 
    <a href="https://www.instagram.com/p/BGE-cm3DNDwFfEfFQDXODEdhXfNtNn79eD0Bos0/" target="_blank"><img style="margin:0px;width:150px;height:150px;" title="" src="//scontent.cdninstagram.com/t51.2885-15/s320x320/e35/13257177_1748741662037365_42463629_n.jpg"></a> 
 
    </div> 
 
</div>

來源

2017-06-16 S. Miller

圖像不在CSS中懸停選擇器引用的div內。因此，懸停在圖像上不會觸發div上的懸停CSS。 – Adrian

@Adrian，即使我將overlay__container div移到社交容器外面並調整懸停樣式，我仍然沒有看到懸停效果。 –

如果你想懸停在圖像上做一些事情的div，圖像需要在divs內。 divs可以留在原地。 – Adrian

我可能是錯在這裏，但我認爲這是因爲pointer-events設置爲自動固有的，孩子div.ig__overlay越來越財產pointer-events: none從它的父元素。這也可以解釋爲什麼你可以手動設置狀態，即使它不能正常接收鼠標事件。

源：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events?v=example

「的元素是永遠鼠標事件的目標;然而，如果這些後代具有指針的事件設置爲其它一些值鼠標事件可以靶向其後代元素在這些情況下，鼠標事件將在事件捕獲/冒泡階段期間在它們到/來自後代的路上適當地觸發該父元素上的事件監聽器。「

來源

2017-06-16 17:48:15

有趣的是，我現在必須找到另一種方法來允許懸停部分背後的鏈接通過覆蓋它們的div進行點擊。謝謝。 –

我真的沒有很好地遵循你的代碼，有沒有阻止你將所有內容放到應用過濾器的那個div中？如果沒有，你可以在整個元素上使用一個事件監聽器來使它像鏈接一樣工作，或者如果你不希望填充是可點擊的，就可以使用img。 –

圖片鏈接正在從加載最近4張instagram圖片的應用中生成。因此，我無法非常調整鏈接代碼，並認爲最好的解決方案是創建具有所需懸停效果的新div，並將它們置於圖像鏈接之上。 –

Div無法識別懸停

回答

相關問題