1

フラッシュなしで私が見たようにこれを行うには2つの方法があります.

マウスを画像の上に移動すると、徐々にホバークラスに変化。または、画像の上にカーソルを合わせると、余白が左右どちらかの方向に変化します。

最初の方法の方が優れていますが、最終的には CSS です。このボタンにカーソルを合わせると、徐々に沈んでいきます。マウスを離すと、元に戻ります。

HTML

<center><br /><br />
<a href="#"><img src="//gc-cdn.com/button.png" alt=""></a>
</center>

CSS

img{border-right:15px solid #333;border-bottom:15px solid #333}
img:hover{border-right:1px solid #333;border-bottom:1px solid #333}

jsフィドル

http://jsfiddle.net/fk6eG/9/

4

1 に答える 1

3

これを行うのにJavaScriptは必要ありません。CSSトランジションを使用できます。

img{
    border-right:15px solid #333;
    border-bottom:15px solid #333;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
img:hover{border-right:1px solid #333;border-bottom:1px solid #333}​

更新されたフィドル：http：//jsfiddle.net/fk6eG/15/

編集：jqueryソリューションの場合、jqueryUIスイッチクラスメソッドを使用できます。

CSS：

 .c1{border-right:15px solid #333;border-bottom:15px solid #333;}
 .c2{border-right:1px solid #333;border-bottom:1px solid #333}​

Javascript：

$(".c1").hover(function () {
        $(this).switchClass("c1", "c2", 1000);        
    }, function () {
        $(this).switchClass("c2", "c1", 1000);    
    });​

サンプルフィドル： http： //jsfiddle.net/fk6eG/23/

于 2012-09-25T14:13:52.090 に答える