当缩略图包含覆盖div时，Fancybox无法工作

Question

我准备了一个缩略图列表，这些缩略图应该与Fancybox一起工作。不过，我也希望，鼠标悬停的缩略图改变颜色，并出现一个标题(这应该在点击之前发生)。

我准备了如下HTML：

<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<link href="css/jquery.fancybox.css" rel="stylesheet" media="screen">

<script><!-- I think you missed this -->
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
    /*
     *  Simple image gallery. Uses default settings
     */

    tpj('.fancybox').fancybox();

});
</script>

<ul class="gallery">
        <li class="gallery-item">
            <a class="hover-wrap fancybox" href="Images/Img_0107.jpg" data-fancybox-group="gallery" ><img src="Images/gallery-1.jpg" alt="">
            </a>
            <div class="overlay">
              <div class="overlay-text">
                <h3>The house</h3>
                    <span class="caption">The garden</span>
              </div>
             </div>
        </li>
        <li class="gallery-item">
            <a class="hover-wrap fancybox" href="Images/Img_0107.jpg" data-fancybox-group="gallery" ><img src="Images/gallery-2.jpg" alt="">
            </a>
            <div class="overlay">
              <div class="overlay-text">
                <h3>The house</h3>
                    <span class="caption">The garden</span>
              </div>
             </div>

        </li>
    </ul>

和相关的CSS如下

.gallery {
  margin: 60px 0 0 0; 
  padding: 0;
}
.gallery-item {
  width: 25%;
  min-height: 100px; 
  margin: 0;
  display: inline-block;
  float: left;
  overflow: hidden;
  position: relative;
}
.gallery-item .hover-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.gallery-item img {
  width: 100%;
}
.gallery-item img {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.gallery-item:hover img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
   transform: scale(1.1);
}
.gallery-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  opacity: 0;
  filter: alpha(opacity=0);
  background-color: rgba(1, 188, 158, .75);
  background-image: url(../Images/icon-magnifier.png);
  background-position: center 40%;
  background-repeat: no-repeat;
  -webkit-transition: opacity 0.15s ease-in-out 0s;
  -moz-transition: opacity 0.15s ease-in-out 0s;
  -o-transition: opacity 0.15s ease-in-out 0s;
  transition: opacity 0.15s ease-in-out 0s;
}
.gallery-item:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=1);
  cursor:pointer;
}
.gallery-item .overlay-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.gallery-item .overlay-text h3 {
  font-size: 1.4rem;
  color: #fff;
  font-weight: normal;
  margin-bottom: 0;
}
.gallery-item .overlay-text .caption {
  font-family: 'OpenSans', serif;
  font-style: italic;
  color: #fff;
  font-size: 1.6rem;
  line-height: 28px;
}

似乎，通过在缩略图上加上一个div (.overlay)，Fancybox不是work.Am做错了什么吗？考虑到我在这里只编写了这个问题所涉及的基本CSS，因此容器的整体效果并不像它应该的那样。

谢谢你的帮助！

Answer 1

正如注释中指出的那样，当您对click元素进行.gallery-item时，实际的目标是.overlay选择器，而不是.fancybox选择器，因此永远不会触发最新的选择器。

您可能需要为.overlay添加一个.overlay事件处理程序，该事件处理程序将触发其.fancybox同胞选择器，如下所示：

var tpj = jQuery;
tpj.noConflict();
tpj(document).ready(function () {
    /*
     *  Simple image gallery. Uses default settings
     */
    tpj('.fancybox').fancybox();
    tpj(".overlay").on("click", function (event) {
        event.preventDefault();
        tpj(this).siblings(".fancybox").trigger("click");
    }); // on
});

请参阅JSFIDDLE