Question

当我将鼠标悬停在上面时，我正试图将图像旋转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>

Answer 1

您似乎将悬停设置为锚点而不是图像 ..

而不是

a:hover{

应该是

img:hover{

<强> Check Fiddle

Answer 2

在webkit浏览器中，内联元素会忽略transform。

要完成这项工作，您需要将a { display:block; }添加到您的CSS中。（内联块也可以）

演示：http://jsfiddle.net/6Df6W/

Answer 3

试试这个：

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

});

Answer 4

我已多次使用它并且效果很好：

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

$(".box a img").rotate(45);

悬停图像旋转45度

4 个答案: