-1

我正在为我正在做的网站使用一个名为 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 的显示设置为无，因为它无法正常工作。以下是我已经讨论过的一些事情；

.overlay > .fancybox {
display:block;
}

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

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

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

我很难说实话。

4

1 回答 1

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

修复了问题。感谢评论但随后删除他的帖子的人，它解决了问题，但我只需要从 toggle() 中删除属性 hide

于 2013-04-09T17:52:47.140 回答