Question

你可以在Jsfiddle上看到我的代码。当您悬停文本时，您可以看到从下到上的小图像，并带有幻灯片效果。但它只在最后一张图片上工作。我想为特定文本的特定图像的所有链接做同样的事情。

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

Answer 1

你只需要嵌套链接和div。我把你的小提琴分成了可行的东西：http://jsfiddle.net/2SRf2/

HTML

<div class="one">
<br />
<div>
    <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 />
</div>
<div>
    <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 />
</div>
<div>
    <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>
</div>

JS

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

）;

Answer 2

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

修改

<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悬停效果不正常

2 个答案: