Question

我已设置悬停效果以显示图标覆盖并过滤我正在处理的网站上的Instagram Feed。当我继续检查并将元素状态设置为悬停时，它可以完美地工作。但是，当实际使用网站并将鼠标悬停在图像上时，她的悬停效果不会出现。

为什么悬停状态无法被识别？

＆＃13;

#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 }} );
}

＆＃13;

<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>

＆＃13;

Answer 1

我可能在这里错了，但我认为由于pointer-events设置为自动固有，因此子div.ig__overlay从其父元素获取属性pointer-events: none。这也可以解释为什么你可以手动设置状态，即使它无法正常接收鼠标事件。

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

＆＃34;元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在它们往返于后代的路径上触发此父元素上的事件侦听器。＆＃34;

Div没有识别悬停

1 个答案: