2

カーソルを合わせると、画像を45度回転させようとしています（実際には、画像を前後に揺らしたいのですが）。運が悪かったので、変換回転でCSSを使用してみました。誰かアイデアがありますか（jQuery、javascriptかもしれません）？

  a:hover{
            behavior:url(-ms-transform.htc);
            /* Firefox */
            -moz-transform:rotate(45deg);
            /* Safari and Chrome */
            -webkit-transform:rotate(45deg);
            /* Opera */
            -o-transform:rotate(45deg);
            /* IE9 */
            -ms-transform:rotate(45deg);
            /* IE6,IE7 */}

 <div id="main">
    <span class="box"><a href=""><img src="blog-icon.png"></img></a></span>
 </div>
4

4 に答える 4

4

画像ではなくアンカーにホバーを設定しているようです。

それ以外の

a:hover{

する必要があります

img:hover{

フィドルをチェック

于 2012-11-15T07:19:41.567 に答える
1

Webkitブラウザーでtransformは、インライン要素では無視されます。

これを機能させるにa { display:block; }は、cssに追加する必要があります。（インラインブロックも機能します）

デモ： http： //jsfiddle.net/6Df6W/

于 2012-11-15T07:23:01.593 に答える
0

これを試して：

$("a img").rotate({ 
   bind: 
     { 
        mouseover : function() { 
            $(this).rotate({animateTo:45})
        },
        mouseout : function() { 
            $(this).rotate({animateTo:0})
        }
     } 

});​
于 2012-11-15T07:27:54.143 に答える
0

私はこれを数回使用しましたが、うまく機能します。

http://code.google.com/p/jqueryrotate/ 

$(".box a img").rotate(45);
于 2012-11-15T07:28:50.517 に答える