0

我正在尝试将调用 mouseenter.arrow事件的 soan 类旋转 90 度。这很容易通过 CSS3 转换实现：

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

我尝试在 jquery 中使用相同的代码，但它不起作用！你能告诉我我的代码有什么问题吗？

$( document ).ready(function() {
   $(".list").on("mouseenter", function() {
      $( '.arrow' ).css({'background-position':'0px 0px',
                         '-webkit-transform': 'rotate(90deg)',
                         '-moz-transform': 'rotate(90deg)',
                         '-o-transform': 'rotate(90deg)',
                         '-ms-transform':'rotate(90deg)',
                         'transform': 'rotate(90deg)'
      });
    });
 });

更新

这是JSFIDDLE链接

和代码就像

<div class="list"></div>
<p>
<div class="arrow"></div>

$( document ).ready(function() {
   $(".list").on("mouseenter", function() {
       $( '.arrow' ).css({'background-position':'0px 0px',
                          ' -webkit-transform': 'rotate(90deg)',
                           '-moz-transform': 'rotate(90deg)',
                           '-o-transform': 'rotate(90deg)',
                           '-ms-transform':'rotate(90deg)',
                            'transform': 'rotate(90deg)'
                         });

   }).on("mouseleave", function() {
     $( '.arrow' ).css({'  -webkit-transform': 'rotate(-90deg)',
                           '-moz-transform': 'rotate(-90deg)',
                           '-o-transform': 'rotate(-90deg)',
                           '-ms-transform':'rotate(-90deg)',
                           'transform': 'rotate(-90deg)'
    });
}); 
});

重要的是代码轮换而不使用代码的第二部分。我的意思是.on("mouseleave"如果你删除那部分代码的第一部分旋转盒子！

4

1 回答 1

1

纯 CSS 解决方案

您不需要为此使用脚本，而是使用 CSS hover 伪选择器。

看看这个工作小提琴

更简单，更清晰，更容易理解。

HTML：（这里没有什么新东西）

<div class="list"></div>
<p>
<div class="arrow"></div>

CSS：

.list
{
    width:150px;
    height:150px;  
    background-color:red;
}

.arrow{
    width:250px;
    height:350px; 
    background-color:blue;
}

.list:hover ~ .arrow
{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

脚本

如果必须使用脚本，请使用.hover(). 悬停函数有两个参数，

第一个参数：鼠标输入函数

第二个参数：鼠标移出函数。再次，这将更清晰，更容易理解。

最后：为什么你的代码不起作用？因为旋转应用于元素的初始位置，所以rotate(90)和rotate(-90)几乎相同（至少对于矩形）。如果您希望它在鼠标离开时恢复正常，则必须应用rotate(0) Check out this Working Fiddle（这是您的旧代码，我真的建议您使用 CSS 方式，或者那种方式）

另外：注意你之前的空白webkit。

于 2013-09-26T23:22:29.443 回答