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不起作用。我做错了什么？考虑到我在这里只写了问题中涉及的基本CSS，因此容器的整体效果不是应该的。

感谢您的帮助！

Answer 1

正如评论中所指出的那样，click元素.gallery-item时，实际的目标是.overlay 选择器而不是.fancybox 选择器，所以最新的永远不会被解雇。

您可能需要为触发其click兄弟选择器的.overlay添加.fancybox 事件处理程序，如：< / p>

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

当缩略图包含叠加div时，Fancybox不起作用

1 个答案: