jQuery锚点悬停淡入淡出效果

Question

jQuery锚点悬停淡入淡出效果

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建议。

- Filth

请查看相关问题（广告下方的右侧），其中一些看起来可以回答您的问题。 - dann.dev

2个回答

1

您可以通过在链接上添加覆盖层来模拟它。您需要在链接的CSS中添加position: relative，并删除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);
});

查看演示

- mVChr

非常接近，谢谢！但是，当我在网站上移动光标时，会产生“span”的重复，并且更多不合适的悬停出现了？在jquery中有背景颜色的地方，我已经用背景图像替换了它，因为在悬停时它应该是一个图像。 - Filth

太棒了，谢谢你的帮助 - 现在我们遇到另一个问题了... 它在Google Chrome或IE中不起作用？ :-( - Filth

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

你的HTML标记无法实现这个功能。

你需要使用fadeIn一个元素，而不是实际包含图像的元素！

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