1

我在现有的 .jpg 精美框缩略图上覆盖 .png 时遇到了一些问题。其余的工作完美。

我有 9 张图片并编写了一个循环来在 PHP 中创建我的 fancybox 画廊。我在现有的 .jpg 缩略图上应用 .png 时遇到了一些困难。

这是我的 PHP 代码：

<?php
        $i=1;
        $title=array("", "t1", "t2", "t3", "t4", "t5", "t6", "t7", "t8", "t9");

        for($i; $i<10; $i++)
        {

        echo "<div id='galeria' class='one-third column alpha'>
            <a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a>
        </div><!--end 1\3 -->";

            $i++;
            echo "<div id='galeria' class='one-third column'>
            <a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a>
        </div><!--end 1\3 -->";
            $i++;
            echo "<div id='galeria' class='one-third column omega'>
            <a title='".$title[$i]."' class='fancybox' rel='group' href='../img/galeria/big".$i.".jpg'><img src='../img/galeria/thumb".$i.".jpg' alt='' /></a>
            </div><!--end 1\3 -->";
        }
    ?>

我试过使用 onMouseOver 和 onMouseOut 没有成功。（我是 JS 和 jQuery 的新手，如果你能提供详细的帮助，我真的很感激）。

4

1 回答 1

0

我不知道我是否理解你的问题，但试试这个：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>    
    $(function(){
        $(".fancybox").hover(
            function(){
                $(".imagem-hover",this).fadeIn(100);
            },
            function(){
                $(".imagem-hover",this).fadeOut(100);
            }
        );
    });
</script>
<style>
    * {position:relative;}
    .fancybox .imagem-hover {position:absolute; z-index:1; display:none;}
</style>
<div id="galeria">
    <a class="fancybox" href="imagemGrande.jpg">
        <img class="imagem-hover" src="over.png" />
        <img src="thumb.jpg" />
    </a>
    <a class="fancybox" href="imagemGrande.jpg">
        <img class="imagem-hover" src="over.png" />
        <img src="thumb.jpg" />
    </a>
    <a class="fancybox" href="imagemGrande.jpg">
        <img class="imagem-hover" src="over.png" />
        <img src="thumb.jpg" />
    </a>
</div>
于 2013-02-20T17:22:07.743 回答