jQueryの、CSSとホバータグ再コード

Question

.social-icon-holder { 
 
    float: left; 
 
    padding-left: 10px; 
 
} 
 

 
.social-icon { 
 
    width: 40px; 
 
    height: 40px; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    position: relative; 
 
    -moz-transition: 0.5s; 
 
    -o-transition: 0.5s; 
 
    -webkit-transition: 0.5s; 
 
    transition: 0.5s; 
 
    /* background: #000;*/ 
 
    color: #fff; 
 
    float: left; 
 
    -moz-border-radius: 100%; 
 
    -webkit-border-radius: 100%; 
 
    border-radius: 100%; 
 
    border: 3px solid #fff; 
 
} 
 

 
.social-icon:hover { 
 
    color: #fff; 
 
    -moz-transform: rotateY(-180deg); 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
} 
 

 
.social-icon:hover .front { 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
.social-icon:hover .back { 
 
    -moz-backface-visibility: visible; 
 
    -webkit-backface-visibility: visible; 
 
    backface-visibility: visible; 
 
} 
 

 
.social-icon .front, 
 
.social-icon .back { 
 
    width: 40px; 
 
    height: 40px; 
 
    position: absolute; 
 
    -moz-border-radius: 100%; 
 
    -webkit-border-radius: 100%; 
 
    border-radius: 100%; 
 
    -moz-backface-visibility: visible; 
 
    -webkit-backface-visibility: visible; 
 
    backface-visibility: visible; 
 
} 
 

 
.social-icon .back { 
 
    -moz-transform: rotateY(-180deg); 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
.social-icon .twitter .back { 
 
    background: #00ACED; 
 
}

<div class="social-icon-holder"> 
 
    <div class="social-icon"> 
 
    <div class="twitter"> 
 
     <div class="front">t</div> 
 
     <div class="back">t</div> 
 
    </div> 
 
    </div> 
 
</div>

jsFiddle here

私は、コードの大部分を生成しませんでした。

ユーザーがアイコンの上を移動するとアイコンが反転/回転します。 私はこれがhoverクラスを介して行われることを認識しています。

しかし、このアニメーションを手作業で（イベントなどで）トリガーしたいと思います。

hoverは信頼できるイベントではないため、トリガーすることはできません。

アニメーションがjQueryでトリガーされるように誰かがこれを再コーディングする手助けができますか？

Answer 1

ホバーの状態を設定するCSSでは、特定のクラスで同じことをするセレクターを追加できます。ライン.social-icon:hoverは今、あなたはその後、jQueryの.toggleClass()機能を使用して、このクラスを切り替えることができますなど.social-icon:hover, .social-icon.hover

になったので、私の例では、私は、クラスhoverを追加しました。

以下の例では、ボタンとclickイベントを使用してこれを行います。

私はちょうどので、アイコンがより見えているので、これは実際の答えとは何の関係もない、背景色を追加して、あなただけ適用したい場合）

$('#triggerHover').on('click', function() { 
 
    $('.social-icon').toggleClass('hover'); 
 
});

body { 
 
background: #ccc; 
 
} 
 

 
.social-icon-holder { 
 
    float: left; 
 
    padding-left: 10px; 
 
} 
 

 
.social-icon { 
 
    width: 40px; 
 
    height: 40px; 
 
    font-size: 30px; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    position: relative; 
 
    -moz-transition: 0.5s; 
 
    -o-transition: 0.5s; 
 
    -webkit-transition: 0.5s; 
 
    transition: 0.5s; 
 
    /* background: #000;*/ 
 
    color: #fff; 
 
    float: left; 
 
    -moz-border-radius: 100%; 
 
    -webkit-border-radius: 100%; 
 
    border-radius: 100%; 
 
    border: 3px solid #fff; 
 
} 
 

 
.social-icon:hover, .social-icon.hover { 
 
    color: #fff; 
 
    -moz-transform: rotateY(-180deg); 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
} 
 

 
.social-icon:hover .front, .social-icon.hover .front { 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
.social-icon:hover .back, .social-icon.hover .back { 
 
    -moz-backface-visibility: visible; 
 
    -webkit-backface-visibility: visible; 
 
    backface-visibility: visible; 
 
} 
 

 
.social-icon .front, 
 
.social-icon .back { 
 
    width: 40px; 
 
    height: 40px; 
 
    position: absolute; 
 
    -moz-border-radius: 100%; 
 
    -webkit-border-radius: 100%; 
 
    border-radius: 100%; 
 
    -moz-backface-visibility: visible; 
 
    -webkit-backface-visibility: visible; 
 
    backface-visibility: visible; 
 
} 
 

 
.social-icon .back { 
 
    -moz-transform: rotateY(-180deg); 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
} 
 

 
.social-icon .twitter .back { 
 
    background: #00ACED; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="social-icon-holder"> 
 
    <div class="social-icon"> 
 
    <div class="twitter"> 
 
     <div class="front">t</div> 
 
     <div class="back">t</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button id="triggerHover">Click me!</button>