ボタン上にホバーすると、正確な変換次数でオブジェクトを回転する

矢印ポイントが常にカーソルを移動するボタンをポイントするメニューを作成したいと思います。前にカーソルを置いていなければ。ボタン上にホバーすると、正確な変換次数でオブジェクトを回転する

HTML：

<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Test</title> 
</head> 
<body> 
    <div class="container"> 
    <div class="first row"> 
     <button class="two btn btn-default col-xs-2 col-sm-offset-5 left">Second</button> 
    </div> 
    <div class="second row"> 
     <button class="one btn btn-default col-xs-2 col-sm-offset-2 left">First</button> 
     <p class="col-xs-4 text-center"> 
     <span class="glyphicon glyphicon-arrow-up"></span> 
     </p> 
     <button class="three btn btn-default col-xs-2 left">Third</button> 
    </div> 
    <div class="third row"> 
     <button class="four btn btn-default col-xs-2 col-sm-offset-5 left">Fourth</button> 
    </div> 
    </div> 

</body> 
</html>

SCSS：

* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 

.container { 
    width: 500px; 
    height: 300px; 
    background: lightgrey; 
    margin-top: 50px; 
    .first { 
    height: 100px; 
    display: flex; 
    align-items: center; 
    } 
    .second { 
    height: 100px; 
    display: flex; 
    align-items: center; 
    } 
    .third { 
    height: 100px; 
    display: flex; 
    align-items: center; 
    } 
    p { 
    color: white; 
    font-size: 50px; 
    transform: rotate(-90deg); 
} 
} 

.rotate-first{ 
    transform: rotate(0deg); 
    transition: all 0.5s ease; 
} 
.rotate-second{ 
    transform: rotate(90deg); 
    transition: all 0.5s ease; 
} 

.rotate-third{ 
    transform: rotate(180deg); 
    transition: all 0.5s ease; 
} 
.rotate-fourth{ 
    transform: rotate(270deg); 
    transition: all 0.5s ease; 
}

はJQuery：

$("button.one").hover(function(){ 
    $("span").addClass("rotate-first"); 
}); 
$("button.two").hover(function(){ 
    $("span").addClass("rotate-second"); 
}); 
$("button.three").hover(function(){ 
    $("span").addClass("rotate-third"); 
}); 
$("button.four").hover(function(){ 
    $("span").addClass("rotate-fourth"); 
});

あなたはコードhereを確認することができます。

CSSでも可能ですか？それともJSだけ？

出典

2017-06-23 Peter Vatler

あなたは、あなたが関連するものを追加する前に、あなたがホバリングしたときに、異なる回転クラスを削除する必要があります。そうすれば、一度に4つのクラスのうちの1つだけが適用され、あなたは立ち往生しません。

$(function(){ 
    var spanClasses = 'rotate-first rotate-second rotate-third rotate-fourth'; 

    $("button.one").hover(function(){ 
     $("span").removeClass(spanClasses).addClass("rotate-first"); 
    }); 
    $("button.two").hover(function(){ 
     $("span").removeClass(spanClasses).addClass("rotate-second"); 
    }); 
    $("button.three").hover(function(){ 
     $("span").removeClass(spanClasses).addClass("rotate-third"); 
    }); 
    $("button.four").hover(function(){ 
     $("span").removeClass(spanClasses).addClass("rotate-fourth"); 
    }); 
});

これがCSSで可能かどうかについては、いいえ、私は考えることができません。 CSSでホバー上の矢印を回転させることもできますが、ホバーを削除すると、デフォルトでどこにでも矢印が戻るようになります。 JavaScriptを使用してクラスを切り替える方法があります。

出典

2017-06-23 20:44:11 cjl750

ありがとうございました！私はremoveClass（）を試しましたが、addClass（）の後に入れましたが、クラスが変数に束縛されていても動作しませんでした。 –

問題ありません！あなたの操作は左から右に順番に行われることを覚えておいてください。したがって、あなたがクラスを追加してからクラスを削除した場合、クラスはなくなります！ 1つのクラスを追加し、それぞれの機能で他の3つを削除することができます（Aの追加、BCDの削除、Bの追加、ACDの削除など）。欲しいです。 – cjl750

ボタン上にホバーすると、正確な変換次数でオブジェクトを回転する

答えて

関連する問題