Question

是否可以在悬停时创建一个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建议。

Answer 1

不可能使用HTML标记。您需要淡化span元素，而不是实际保存图像的a！

jsFiddle demo

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;      
}

Answer 2

您可以通过向链接添加叠加来伪造它。您需要将position: relative添加到链接CSS，并删除a:hover CSS，然后您可以为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);
});

Jquery锚悬停淡出

2 个答案:

jsFiddle demo

See demo