1

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/

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 に答える