jquery - jQuery的悬停效果无法正常工作

您可以在Jsfiddle上看到我的代码。将鼠标悬停在文本上时，您会看到从底部到顶部的小图像，并带有幻灯片效果。但它仅适用于最后一张图片。我想对具有特定图像的特定文本的所有链接执行相同的操作。

Fiddle

jQuery的

$('.one').hover(
        function() {
            $(this).find('.inside').animate({
                bottom: '0%'
            }, 'fast' );
        },function() {
            $(this).find('.inside').animate({
                bottom: '-100%'
            },'fast');
        }
    );

的HTML

<div class="one">
    <br />
    <a href="#">First image</a>
    <div class="inside"><img src="https://www.gravatar.com/avatar/1afb384456d02c2deee372f232b9bd9c?s=128&d=identicon&r=PG&f=1" width="60" height="60" /></div>
    <br />
    <a href="#">Second image</a>
    <div class="inside"><img src="https://www.gravatar.com/avatar/8c3e29cdce11af820abb42524b47c424?s=48&d=identicon&r=PG" width="60" height="60" /></div>
    <br />
    <a href="#">Third image</a>
    <div class="inside"><img src="https://www.gravatar.com/avatar/d3c9b47a12b3dd664520e5d9dd22d741?s=48&d=identicon&r=PG&f=1" width="60" height="60" /></div>
</div>

的CSS

.one
{
    overflow: hidden;
            position: absolute;
}

.one .inside
{
    position: absolute;
    bottom: -100%;
}

a
{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}

最佳答案

如果可以更改标记，则可以使用：

编辑：

<div class="one">
    <br />
    <a href="#">
        <img src="https://www.gravatar.com/avatar/1afb384456d02c2deee372f232b9bd9c?s=48&d=identicon&r=PG" class="inside" />
        First image
    </a>

    <br />
    <a href="#">
        <img src="https://www.gravatar.com/avatar/8c3e29cdce11af820abb42524b47c424?s=48&d=identicon&r=PG" class="inside" />
        Second image
    </a>

    <br />
    <a href="#">
        <img src="https://www.gravatar.com/avatar/d3c9b47a12b3dd664520e5d9dd22d741?s=48&d=identicon&r=PG&f=1"class="inside"/>
        Third image
    </a>

</div>

并更改CSS和javascript代码：

.one a
{
    position: relative;
}

.one .inside
{
    position: absolute;
    top: 100%;
    opacity: 0;
    z-index: 3;
}

a
{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}

jQuery的：

$('.one a, .one .inside').hover(
    function(e) {
        var el = $(this).find('.inside');
       var isHover = e.type === 'mouseenter';
        el.stop(true).animate({
            top: isHover ? '0%' : '100%',
            opacity: isHover ? 1 : 0
        }, 'fast' );
    }
);

演示：http://jsfiddle.net/8UNNz/12

关于jquery - jQuery的悬停效果无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21326297/