0

.arrowmouseenter イベントで呼び出された 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)'
    });
}); 
});

重要コードの 2 番目の部分を使用せずにコードをローテーションします。つまり.on("mouseleave"、その部分を削除すると、コードの最初の部分がボックスを回転させます!

4

1 に答える 1

1

純粋な CSS ソリューション

そのためにスクリプトを使用する必要はありません。代わりに、CSS ホバー疑似セレクターを使用してください。

このワーキングフィドルをチェックしてください

はるかにシンプルで、クリーンで、理解しやすい。

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(). hover 関数は 2 つの引数を取り、

最初の引数: マウス インの関数

第 2 引数: マウス アウトの関数。繰り返しますが、これはより明確で理解しやすいものになります。

最後に: コードが機能しないのはなぜですか? 回転は要素の初期位置に適用されるため、rotate(90)とrotate(-90)はほとんど同じです (少なくとも長方形の場合)。マウスが離れたときに通常に戻りたい場合は、適用する必要がありますrotate(0) Check out this Working Fiddle (これは古いコードです。CSS の方法またはその方法を使用することを強くお勧めします)

また、以前の空白に注意してくださいwebkit。

于 2013-09-26T23:22:29.443 に答える