Question

我试图在我的图片库中显示一个模式，但是当图像位于图形标签中（我需要悬停效果时）时，该模式就会停止工作。

我认为这与数字标签有关，但我认为我一直在研究它很久了！

模态代码本身和工作原理是： https://jsfiddle.net/ctrant/vz8qyj7r/5/

<img class="galleryImg" id="img-0" src="http://lorempixel.com/400/200/animals/1" alt="Alt Text 1">
<img class="galleryImg" id="img-1" src="http://lorempixel.com/400/200/animals/2" alt="Alt Text 2">

我想使用的代码是： https://jsfiddle.net/ctrant/9jkd4px0/14/

<div class="gallery-item people">
      <figure class="effect-milo">
        <img class="galleryImg" id="img-0" src="http://lorempixel.com/400/200/animals/5" alt="img01"/>
        <figcaption>
          <h2>Faithful <span>Milo</span></h2>
          <p>Milo went to the woods. He took a fun ride and never came back.</p>
          <!-- <a href="#">View more</a> -->
        </figcaption>     
      </figure>
    </div>

    <div class="gallery-item people">
      <figure class="effect-milo">
        <img class="galleryImg" id="img-1" src="http://lorempixel.com/400/200/animals/4" alt="img02"/>
        <figcaption>
          <h2>Faithful <span>Milo</span></h2>
          <p>Milo went to the woods. He took a fun ride and never came back.</p>
          <!-- <a href="#">View more</a> -->
        </figcaption>     
      </figure>
    </div>

Answer 1

您是否尝试过指针事件？ https://jsfiddle.net/wwWaldi/j10e8bdr/5/

figure figcaption{
  pointer-events: none;
}

当心浏览器兼容性：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events#Browser_compatibility

当图像标签在图形标签内时如何进行模态工作

1 个答案: