Jquery 当缩略图包含覆盖div时，Fancybox不起作用

我准备了一个可以使用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>

看起来，通过在缩略图上添加div（.overlay），Fancybox不起作用。我做错什么了吗？考虑到我在这里只写了问题中涉及的基本CSS，因此容器的整体效果不是应该的。

---

谢谢你的帮助

正如评论中所指出的，当您在

库项目

元素上单击

时，实际目标是
.overlay
选择器，而不是
.fancybox
选择器，因此不会触发最新的

您可能需要为触发其同级选择器的
.overlay
添加
单击
事件处理程序，如：

请参见
，正如您所怀疑的，问题很可能是覆盖层。由于覆盖元素位于fancybox元素的顶部，因此用户单击的是覆盖元素，而不是fancybox元素。也许用鼠标悬停的动作来锁定fancybox元素本身，以获得不透明度。您可以将文本元素作为子元素放入fancybox，使其对fancybox悬停动作作出反应。
.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;
}

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