我已经设置了一个悬停效果来显示图标覆盖和过滤我正在工作的网站上的instagram提要。当我继续检查并将元素状态设置为悬停时,它工作得很好。然而,当实际使用该网站和悬停在图像,她悬停效果并没有出现。
为什么悬停状态未被识别?
#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 }} );
}
个字符
1条答案
按热度按时间0ve6wy6x1#
这里我可能错了,但我认为因为
pointer-events
被设置为自动固有,所以子div.ig__overlay
从其父元素获得属性pointer-events: none
。这也解释了为什么您可以手动设置状态,即使它不能正常接收鼠标事件。来源:https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events?v=example
“元素永远不是鼠标事件的目标;但是,如果鼠标事件的后代元素具有设置为其他值的指针事件,则这些后代元素可以作为鼠标事件的目标。在这些情况下,鼠标事件将在事件捕获/冒泡阶段期间在父元素上触发事件侦听器(在它们往返于子元素的过程中)。