-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 に答える