Question

我正在使用一个名为fancybox的jQuery插件来处理我正在做的网站。它看起来很奇怪，因为首页上有一些不可见的叠加层，但它会激活我页面底部的缩略图视图，并覆盖我的链接并破坏整个页面。

有问题的网站： http://johns-webdesign.com/client/Andy/gallery.html

HTML

<div id="content" style="height:350px">
        <h1>Our Work</h1>

<div class="photo_thumb"><a href="#"><img src="img/work/construction bathroom.jpg" width="160" height="100"></a><p>Title</p>
<div class="overlay"><a class="fancybox" href="img/work/construction bathroom.jpg" title="Test">Hi</a></div></div>

<div class="photo_thumb"><a href="#"><img src="img/work/construction best windows.jpg" width="160" height="100"></a><p>Title</p>
<div class="overlay"><a class="fancybox" href="img/work/construction best windows.jpg" title="Test">Hi</a></div></div>

<div class="photo_thumb"><a href="#"><img src="img/work/construction block.jpg" width="160" height="100"></a><p>Title</p>
<div class="overlay"><a class="fancybox" href="img/work/construction block.jpg" title="Test">Hi</a></div></div>

<div class="photo_thumb"><a href="#"><img src="img/work/construction floors.jpg" width="160" height="100"></a><p>Title</p>
<div class="overlay"><a class="fancybox" href="img/work/construction floors.jpg" title="Test">Hi</a></div></div>

<div class="photo_thumb"><a href="#"><img src="img/work/construction hygiene.jpg" width="160" height="100"></a><p>Title</p>
<div class="overlay"><a class="fancybox" href="img/work/construction hygiene.jpg" title="Test">Hi</a></div></div>

<div class="photo_thumb"><a href="#"><img src="img/work/construction sanity.jpg" width="160" height="100"></a><p>Title</p>
<div class="overlay"><a class="fancybox" href="img/work/construction sanity.jpg" title="Test">Hi</a></div></div>

<div class="photo_thumb"><a href="#"><img src="img/work/construction stair railings.jpg" width="160" height="100"></a><p>Title</p>
<div class="overlay"><a class="fancybox" href="img/work/construction stair railings.jpg" title="Test">Hi</a></div></div>

<div class="photo_thumb"><a href="#"><img src="img/work/constructions stairs railings.jpg" width="160" height="100"></a><p>Title</p>
<div class="overlay"><a class="fancybox" href="img/work/constructions stairs railings.jpg" title="Test">Hi</a></div></div>


        </div>

CSS

.photo_thumb {
    height:100px;
    width:160px;
    float:left;
    margin:4px 4px 15px 4px;
    padding:5px;
    background-color:#999;
}
.overlay {
    height:100px;
    width:160px;
    display:none;
    margin-top:-137px;  
    background-color:#666;
    opacity:0.5;
    background-position:center;
    background-image:url(../img/zoom.png);
    background-repeat:no-repeat;
    background-position: 1 0;
}
.photo_thumb:hover > .overlay {
    position:relative;
    z-index:2;
    display:block;
    opacity:0.6;
    background-position:center; 
    background-color:#666;
    height:100px;
    width:160px;
    opacity:0.5; 
}
.photo_thumb p {
    margin-top:3px;
    margin-left:-20px;
}
.overlay a{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-decoration:none; /* Makes sure the link   doesn't get underlined */
    z-index:10; /* raises anchor tag above everything else in div */
    background-color:white; /*workaround to make clickable in IE */
    opacity: 0; /*workaround to make clickable in IE */
    filter: alpha(opacity=1); /*workaround to make clickable in IE */
}
.fancybox {
    display:none;
}

我目前将fancybox的显示设置为none，因为它无法正常工作。以下是我经历过的一些事情;

.overlay > .fancybox {
display:block;
}

这没有解决问题，所以我尝试了一些JavaScript

<script type="text/javascript">
   $('.overlay').hover(function() {
    $('.fancybox').toggle(show)();
});
    </script>

由于某种原因，这没有做任何事情。

我很难说是相当诚实。

Answer 1

    <script type="text/javascript">   
    $(document).ready(function(){ 
  $('.overlay').hover(function() {
    $('.fancybox').toggle()();
    });
});
</script>

修正了问题。感谢评论但后来删除了帖子的人，它解决了问题，但我只需要从切换中删除属性hide（）

jQuery glitched lightbox

1 个答案: