2

ポートフォリオにキャプション付きのホバー オーバーレイ効果を実現したいと考えています。基本的なnav ul li a imgを使用して作品をリストしています。特定の参照（リンク付きの画像）にカーソルを合わせると、白いテキストに黒いオーバーレイが必要です

これまでのところ私はこれを持っていますが、どうやら私のリンクを混乱させているようです. また、現時点では、fadeIn トランジションはほとんど存在しません。

THE HTML

<section id="portfoliowrapper">
<nav>
 <ul class="colum3">
        <li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item"  /></a></li>
        <li><a href="portfolio_detail.aspx" title=""><img src="/images/businesscards_single_item.jpg" alt="businesscards_single_item"  /></a></li>
        <li><a href="portfolio_detail.aspx" title=""><img src="/images/webraket_single_item.jpg" alt="webraket_single_item"  /></a></li>

 </ul>
</nav><!-- //navcontainer -->
</section><!-- //portfoliowrapper-->

MY CSS

 #portfoliowrapper { float: left;}
 #portfoliowrapper nav .colum3 { float: left;}
 #portfoliowrapper nav .colum3 a img { }
 #portfoliowrapper nav .colum3 li {float: left;width: 253px;height: 220px;margin-right:    10px;margin-bottom: 10px; background: #555; }
 #portfoliowrapper nav .colum3 li:last-child { margin-right: 0px;}

THE J

<script>
    $(document).ready(function () {
    $('.colum3 li a').bind('mouseover', function () {

        $(this).parent('li').css({ position: 'relative' });
        var img = $(this).children('img');
        $('<div />').text(' ').css({
            'height': img.height(),
            'width': img.width(),
            'background-color': '#000',
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'opacity': 0.6
        }).bind('mouseout', function () {
            $(this).fadeOut('fast', function () {
                $(this).remove();
            });
        }).insertAfter(this).animate({
            'opacity': 0.6
        }, 'fast');

    });

});
</script>

参考文献にカーソルを合わせると、黒いオーバーレイにキャプションが表示され、写真をクリックして特定の参考文献に移動できます。

4

3 に答える 3

1

ここから始めましょう - オーバーレイ div を捨ててオーバーレイ テキスト ビットを優先し、画像自体をフェードさせました。背景が暗い/黒である限り、同じように見えます。

http://jsfiddle.net/g6xVR/1/

于 2011-05-12T18:42:07.330 に答える
0

の代わりに を使用すると、タグをタグ内に挿入できます。これにより、リンクが中断されることはありません。スパン css を「display: block」に設定するだけです。

可能であれば、キャプションをマークアップに書き出してから、マウスオーバーが発生するまで CSS を介してキャプションを非表示にすることをお勧めします。マウスオーバーごとに DOM 要素を作成および削除するよりも高速です。

于 2011-05-12T16:12:51.910 に答える
0

これを試してください：jsfiddle

これは title 属性を使用してオーバーレイに表示します。画像パスは完全なパスではないため、フィドルは画像を表示しません (完全ではありません) が、アイデアは得られます。

于 2011-05-12T18:53:42.617 に答える