1

下の文言に影響を与えずにロゴ画像を上に移動したいのですが、両方の要素が別の div にあり、親 div にラップされていてもトリガーされます。理解できません。余白と関係があると思いますが、テキスト要素に反対の値を逆に設定しようとすると、奇妙な動作が発生しました。

フィドル

CSS:

.full-circle {
display:block;
margin:auto;
margin-top: 15px;
overflow: hidden;
height: 180px;
width: 180px;
border: 2px solid #FFF;
-moz-border-radius: 90px;
-webkit-border-radius: 90px;
background:#FDF5E6;
-webkit-transition: margin 0.2s ease-out; 
-moz-transition: margin 0.2s ease-out; 
-o-transition: margin 0.2s ease-out;
}

.full-circle:hover{margin-top: 2px;}

jQuery:

$('.full-circle').hover(
            function(){
                $(this).stop().animate(
                    {marginTop: '2'}, 20, 'linear'   
                );//end animate
            },//end function
            function(){
                $(this).stop().animate(
                {marginTop: '15'}, 20, 'linear'
                );//end animate
            }//end function
        );//end hover
4

3 に答える 3

1

に追加するだけposition: relativeで、 の代わりにプロパティを.full-circleアニメートできます。topmargin-top

$('.full-circle').hover(
    function(){
        $(this).stop().animate(
            {top: '-10'}, 20, 'linear'   
        );//end animate
    },//end function
function(){
    $(this).stop().animate(
        {top: '15'}, 20, 'linear'
        );//end animate
    }//end function
);//end hover

Working Demo

于 2013-04-08T05:57:38.853 に答える
0

CSSで簡単に

.full-circle{margin-top:15px; margin-bottom:15px}

.full-circle:hover{margin-top:2px; margin-bottom:28px}

.logo{overflow:hidden;}

これはJQueryなしで実行できます。jqueryを使用してもこれを実行できます.margintopとbottomに変更を適用するだけで、変更が管理されます.

これ.greyで、追加のマージン/パディングを作成するフィルターができました。そのために

オーバーフローの副作用を避けるためにこれを行いました.logo{ overflow:hidden}

ワーキングフィドル

これで十分です。

于 2013-04-08T06:12:57.650 に答える
0

両方のアイテムがフロー内にあるため、テキストが上に移動します。最初のアイテムを移動すると、2 番目のアイテムの位置に影響します。

円の余白を調整する代わりにposition:relative;、top プロパティを適用してから負の値に調整して上に移動しますtop:-20px; (任意の量)。

相対的に配置された要素の上、下、左、または右のプロパティを調整すると、フロー内の隣接要素との相互作用に影響を与えることなく、要素が画面上で描画される場所に影響します。

于 2013-04-08T05:39:57.660 に答える