3

（画像が内部にあるアンカー上で）ホバーにjqueryの「フェード」効果を作成することは可能ですか？

HTML

<ul id="list">
    <li>
        <a target="_blank" href="http://google.com">
            <img src="http://www.littlegiant.co.nz/wp-content/uploads/2012/01/Meccano-293x170.jpg" alt="" />
        </a>
    </li>
</ul>

CSS

#list li a img {
    position: relative;
    z-index: -1;
}

#list li a {
    display: block;
    width: 293px;
    height: 170px;
}
#list li a:hover {
    background: red;
    width: 200px;
    height: 50px;
}

これが私がこれまでに持っているものです：http：//jsfiddle.net/ecFBK/4/

正しい赤にカーソルを合わせると、jqueryを使用してフェードインさせる方法がわかりません。CSS3の提案はしないでください。

4

2 に答える 2

1

HTMLマークアップでは不可能です。実際に画像を保持するspan要素ではなく、要素をフェードインする必要があります。a

jsFiddleデモ

jQuery：

$('#list li a').hover(function(){
   $('span', this).stop().fadeIn(500);
}, function(){
  $('span', this).stop().fadeOut(500);    
});

HTML：

<ul id="list">
    <li>
        <a target="_blank" href="http://google.com">
            <img src="http://www.littlegiant.co.nz/wp-content/uploads/2012/01/Meccano-293x170.jpg" alt="" />
            <span>Description here!</span>
        </a>
    </li>
</ul>

CSS：

#list li a {
    display: block;
    position:relative;
    width: 293px;
    height: 170px;
}

#list li a img {
    position: relative;
    z-index: -1;
}

#list li a span {
    position:absolute;
    left:0px;
    display:none;
    background:red;      
}
于 2012-06-26T01:02:15.023 に答える
1

リンクにオーバーレイを追加することで、偽造することができます。position: relativeリンクCSSに追加し、CSSを削除する必要がありますa:hover。そうすると、jQueryに対して次のようなことができます。

$('#list li a').hover(function(ev){
    if (!$(this).find('.hover').length) {
        $('<span class="hover">').css({
            'background-color': 'red',
            'display': 'inline-block',
            'opacity': 0,
            'width': 293,
            'height': 170,
            'position': 'absolute',
            'top': 0,
            'left': 0
        }).appendTo($(this));
    }
    $(this).find('.hover').stop(true, true).animate({'opacity': 1}, 2000);
}, function(ev){
    $(this).find('.hover').stop(true, true).animate({'opacity': 0}, 1000);
});

デモを見る

于 2012-06-26T01:02:31.467 に答える