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中，您可以添加一個選擇器，它對特定的類執行相同的操作。在我的例子，我添加了類hover，太行.social-icon:hover現在變成.social-icon:hover, .social-icon.hover等

然後，您可以使用jQuery的.toggleClass()功能切換這個類。

在下面的例子中，我使用一個按鈕和一個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>