마우스 아웃시 아이콘 스핀

this question을 각각 this JSFiddle이라고합니다. 나는 마우스 아웃시 아이콘을 반대로 돌리고 싶습니다. 어떤 제안?마우스 아웃시 아이콘 스핀

.fa-spin-hover:hover { 
    -webkit-animation: spin 1s 1 linear; 
    -moz-animation: spin 1s 1 linear; 
    -o-animation: spin 1s 1 linear; 
    animation: spin 1s 1 linear; 
} 

<i class="fa fa-circle-o-notch fa-spin-hover" style="font-size:100px"></i><br />

출처

2017-02-06 Ben

당신은 JS 솔루션을 될까요? – TricksfortheWeb

글쎄, CSS가 유일한 해결책이 있다면, 그게 가장 환영받을 것입니다. – Ben

아이콘이 기본적으로 왼쪽으로 회전하고 마우스를 올리면 오른쪽으로 회전하지만 CSS에는'mouseOut()'과 같은 기능이 없으므로 ** 전용 JavaScript가 있어야합니다. ** 호버를 떠난 후 ** 반대 방향으로 회전 시키십시오 **. –

시도해보십시오. 이것은 약간의 자바 스크립트와 CSS를 사용합니다. 이것으로 몇 가지 아이디어를 얻을 수 있습니다.

$(".circle").mouseover(function(){ 
 
    $(".circle").removeClass("reverse").addClass("hover"); 
 
}).mouseout(function(){ 
 
    $(".circle").removeClass("hover").addClass("reverse"); 
 
});

.hover { 
 
    -ms-transform: rotateX(360deg); 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    -ms-transition:1s all; 
 
    -webkit-transition:1s all; 
 
    transition:1s all; 
 
} 
 

 
.reverse { 
 
    -ms-transform: rotate(0deg); 
 
    -webkit-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -ms-transition:1s all; 
 
    -webkit-transition:1s all; 
 
    transition:1s all; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
 
    
 
</head> 
 
<body> 
 
    <i class="fa fa-circle-o-notch circle" style="font-size:100px"></i> 
 

 
</body> 
 
</html>

출처

2017-02-07 00:30:14 Victoria

이것은 내가 찾고있는 것입니다. 고마워요! – Ben

걱정하지 말고, 행복한 코딩 :) – Victoria

빅토리아! :) – Ben

마우스 아웃시 아이콘 스핀

답변

관련 문제