0

ボタンにカーソルを合わせると、別の div が飛び出し、その背景が大きなサイズに変わります。

CSS 変換を使用してこれを実行しようとしましたが、問題は、マウスがボタンの上に置かれていないときに効果を即座に停止したいことです。代わりに、div がより大きなサイズにスケーリングされた後、元のより小さいサイズにサイズ変更されてから消えます。可視性プロパティを使用して、div を非表示および表示しました。

代わりに jquery にフォールバックすることに決め、animate() を使用して div の背景画像のサイズを変更しようとしましたが、明らかに jquery ではまだサポートされていません。

この効果を達成する方法について何か提案はありますか?

編集：

これはjsfiddleの例ですhttp://jsfiddle.net/dRF3r/1/

html

<div class="pointer">Hover
<div id="circle_bottom"></div>
<div id="circle_top"></div>
</div>

CSS

.pointer {
    background: pink;
    width: 50px;
    height: 50px;
    position: relative;
}
#circle_bottom {
    position: absolute;
    top: 80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: green;
    transition:           All 0.5s ease;
                    -webkit-transition: All 0.5s ease;
                    -moz-transition:    All 0.5s ease;
                    -o-transition:      All 0.5s ease;
    visibility: hidden;
}
#circle_top {
    position: absolute;
    top: 90px;
    left: 10px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: orange;
    transition:           All 0.5s ease;
                    -webkit-transition: All 0.5s ease;
                    -moz-transition:    All 0.5s ease;
                    -o-transition:      All 0.5s ease;
    visibility: hidden;

}
.pointer:hover #circle_bottom {
    transform: rotate(0deg) scale(1.1) skew(0deg) translate(0px, -10px);
    -webkit-transform: rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    -moz-transform:    rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    -ms-transform:     rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    -o-transform:      rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    visibility: visible;
}

.pointer:hover #circle_top {
    transform: rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -webkit-transform: rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -moz-transform:    rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -ms-transform:     rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -o-transform:      rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    visibility: visible;
}

円が消える前に小さい形状にサイズ変更されることに注意してください。これを回避する方法はありますか？

ここに私がしようとしているものの画像を見るためのリンクがあります: http://i41.tinypic.com/2r1zrwm.jpg

私の目標は、ポインターをホバーすると、円が表示されて少し大きくなることです。コンセプトは、div を互いに積み重ねることです。

4

4 に答える 4

0

このjquery pluginを使用するだけで解決策が見つかりました。これはgithubでも見ることができ ます。

于 2013-07-01T02:25:51.480 に答える
0

jQueryが必要な場合は、hoverイベントとanimateメソッドを使用できます

$('div').hover(function() {
    $(this).animate({
        "border-width": "20px"
    });
}, function() {
    $(this).animate({
        "border-width": "10px"
    });
});

jsフィドル

于 2013-06-28T19:46:11.447 に答える