1

我对 jQuery 动画有疑问，我在一个页面上有 5 个框，在每个框上都有一个悬停处理程序，可以扩展框并显示一些额外的文本。在每个框中都有带有一些文本的 h1 标签。该 h1 标签以（无悬停）开始并在您悬停时停留在那里，问题是当我将鼠标悬停在 h1 标签上时，动画停止并且框缩回到原始状态（如无悬停）

这是jsfidle，只需将鼠标悬停在框上，然后输入“为什么”（h1）即可查看问题所在。即使我将鼠标悬停在 h1 上，我也希望该框保持扩展。谢谢

HTML：

 <div class="box">
        <h1>why</h1>
        <div>
            <p>test</p>
        </div>
    </div>

CSS：

 .box{
    background-color: white;
    display: inline-block;
    float: left;
    height: 320px;
    margin: 0 155px 40px 0;
    position: relative;
    width: 320px;
    z-index: 1000;
}

.box > div {
    display: inline-block;
    width:280px;
    height:280px;
    padding:20px;
}

.box > div p{
   color: #FFFFFF;
    display: none;
    float: right;
    font-weight: bold;
    margin-top: 5px;
    position: relative;
    top: 28px;
    width: 450px;
}

.box h1{
    font-size: 40px;
    height: 0;
    padding-top: 0;
    position: relative;
    text-align: center;
    top: 32%;
    font-family: 'DeftoneStylus';
}

.box:nth-child(1) > div{
    background-color:red;   
}

.box:nth-child(1) > div:hover{
    background-color:blue;
}

.box:nth-child(1):hover h1{
    color:#94C11F;    
}

jQuery：

 $( document ).ready(function() {

    $('.box > div').hover(function() {
        $(this).clearQueue().parent().css('z-index', '10000')
        $(this).clearQueue().find("p").css('display', 'block')
        $(this).animate({
            width: 785, height: 280, margin: 0,
        });
    }, function() {
        $(this).clearQueue().parent().css('z-index', '100')
        $(this).clearQueue().find("p").css('display', 'none')
        $(this).animate({
            width: 280, height: 280, margin: 0,
        }, function() {
            $(this).parent().css('z-index', '0');
        });
    });
});

http://jsfiddle.net/Bfxem/

4

1 回答 1

1

你可以h1在里面移动div和position: absolute

HTML：

<div class="box">
    <div>
        <h1>why</h1>
        <p>Our purpose, our difference. We are a ...</p>
    </div>
</div>

CSS：

.box h1 {
    position: absolute;
    text-align: center;
    top: 32%;
    left: 30%;
}

查看修改后的 JSFiddle

于 2013-10-30T17:16:42.223 回答