1

私は、ホバー時に詳細情報を表示するために展開する結び目のあるロープ スタイルのバーを使用してサイトに取り組んでおり、アニメーションを正しく表示するのに問題があります。(ステージング リンクは次のとおりです: http://couchcreative.co/tcc/ )。

現在、最初のステップのバーはボックスの下部に移動してから、新しい位置に上向きにアニメーション化されますが、ホバーボックスの下部から開始せずに、ホバー時に新しい位置に移動したいだけです。なぜこれが起こっているのか説明できる人はいますか？関連する CSS は「.look」クラスで始まります。

私がこれを正しく説明していない場合は申し訳ありませんが、サイトにアクセスしたときに、アニメーションが少し… ずれていることについて私が何を意味するかがわかると思います. 助けてくれてありがとう！

4

1 に答える 1

2

HTML 構造を作り直して、よりセマンティックで反復性の少ないものにします。

デモ: http://jsfiddle.net/krmn4/5/

HTML:

<a href="/testicularcancer/" class="look">
    <figure><img src="http://couchcreative.co/tcc/img/look.png" /></figure>
    <div class="bar"></div>
    <div class="off">
        <h4>Look</h4>
    </div>
    <div class="on">
        <h4>Relax your scrotum.</h4>
        <p>Check your testicles just after you’ve had a bath or shower, when the muscles in the scrotum are relaxed, making it easier for you to feel any lumps, growths or tenderness. Stand in front of the mirror. Look for any swelling on the skin of your scrotum.</p>
        <span>Learn More</span>
    </div>
</a>

CSS:

.look {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 235px;
    overflow: hidden;

    /* optional styling */
    color: #000;
    text-align: center;
    text-decoration: none;
}
.look h4 {
    /* optional styling */
    line-height: 48px;
    font-size: 20px;
    font-weight: bold;
}

.look .bar {
    height: 48px;
    background: url(http://couchcreative.co/tcc/img/step_1.png) 0 0 repeat-x;
    margin: -24px 0 0; /* half of height */

    /* necessary so figure img doesn't overlap */
    position: relative;
    z-index: 1;
}
.look figure,
.look .off,
.look .on {
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    transition: all 300ms linear;
    height: 0;
    opacity: 0;
    overflow: hidden;
}
.look figure {
    /* optional styling */
    background-color: #b2d5e6;
    padding: 12px;
    margin: 0;
}
.look .off {
    height: 48px;
    opacity: 1;
}

/* hover state */
.look:hover .off {
    height: 0;
    opacity: 0;
}
.look:hover figure {
    height: 120px; /* or however tall it needs to be */
    opacity: 1;
}
.look:hover .on {
    height: 220px; /* or however tall it needs to be */
    opacity: 1;
}
于 2013-01-27T20:52:26.087 に答える