Question

我有一个jQuery动画的问题，我在页面上有5个盒装，每个盒子上都有一个悬停处理程序，它扩展了框并显示了一些额外的文本。在每个框中都有h1标记和一些文本。那个h1标签是开始的（没有悬停）并且当你悬停时停留在那里，问题是当我将鼠标悬停在h1标签上时动画停止并且盒子缩回到原始状态（如没有悬停）

这是jsfidle，只是将鼠标悬停在方框上，然后单词'why'（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/

Answer 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

div里面的H1取消了jQuery动画

1 个答案: