JS保持對CSS選擇器懸停狀態 - CSS動畫，嘗試多個答案，但沒有成功

所以我一直在通過多種答案已經在堆棧溢出，但由於我不是是經歷了JS我在這裏要求一些直接幫助我的問題。即使在我的鼠標離開觸發hover元素的區域之後，我仍想保持：hover狀態爲活動狀態。JS保持對CSS選擇器懸停狀態 - CSS動畫，嘗試多個答案，但沒有成功

目前我有一個動畫使用CSS觸發使用：懸停選擇器，現在我遇到的問題與我提供的其他答案，我認爲是因爲懸停觸發一個元素，而另一個元素動畫。

下面是我的CSS和HTML，

CSS

#offerblock4:hover+#rotategiggles { 
    animation: animationFrames9 linear 0.5s; 
    animation-iteration-count: 1; 
    transform-origin: 100% 100%; 
    animation-fill-mode: forwards; 
    /*when the spec is finished*/ 
    -webkit-animation: animationFrames9 linear 0.5s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-transform-origin: 100% 100%; 
    -webkit-animation-fill-mode: forwards; 
    /*Chrome 16+, Safari 4+*/ 
    -moz-animation: animationFrames9 linear 0.5s; 
    -moz-animation-iteration-count: 1; 
    -moz-transform-origin: 100% 100%; 
    -moz-animation-fill-mode: forwards; 
    /*FF 5+*/ 
    -o-animation: animationFrames9 linear 0.5s; 
    -o-animation-iteration-count: 1; 
    -o-transform-origin: 100% 100%; 
    -o-animation-fill-mode: forwards; 
    /*Not implemented yet*/ 
    -ms-animation: animationFrames9 linear 0.5s; 
    -ms-animation-iteration-count: 1; 
    -ms-transform-origin: 100% 100%; 
    -ms-animation-fill-mode: forwards; 
    /*IE 10+*/ 
} 
@keyframes animationFrames9 { 
    0% { 
     transform: translate(1px, 1px) scaleY(NaN); 
    } 
    100% { 
     transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
    } 
} 
@-moz-keyframes animationFrames9 { 
    0% { 
     -moz-transform: translate(1px, 1px) scaleY(NaN); 
    } 
    100% { 
     -moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
    } 
} 
@-webkit-keyframes animationFrames9 { 
    0% { 
     -webkit-transform: translate(1px, 1px) scaleY(NaN); 
    } 
    100% { 
     -webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
    } 
} 
@-o-keyframes animationFrames9 { 
    0% { 
     -o-transform: translate(1px, 1px) scaleY(NaN); 
    } 
    100% { 
     -o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
    } 
} 
@-ms-keyframes animationFrames9 { 
    0% { 
     -ms-transform: translate(1px, 1px) scaleY(NaN); 
    } 
    100% { 
     -ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
    } 
}

HTML

<div class="row"> 
<div class="column"> 

<a id="offerblock4" href="#"> 
<div class = "offer4 fullpic"> 

<img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img> 

</a> 

<div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:338px;">   
<img src="GIGGLES_1.png"></img> 


</div> 
</div>

獎勵積分我相信我所要求的是非常標準和ISN太難了，我希望我能做到我自己，所以我也會通過要求甚至更進一步，並且如果可能有js（或css）會觸發懸停時的原始動畫，然後當鼠標離開元素時觸發另一個動畫相同的元素，基本上允許我作爲鼠標離開該區域時反轉動畫:)

謝謝大家！

JS FIDDLE：https://jsfiddle.net/sLqf2zbh/

編輯我也似乎過差的指令複雜;目前，當＃offerblock4懸停在製作#rotategiggles動畫時，我的動畫工作正常。我想要做的是包含JS，所以當鼠標離開＃offerblock4時，然後#rotategiggles保持動畫位置的結束，並且不會縮減其原始起始位置。

加分要求是指當鼠標離開＃offerblocks4區域時，動畫會反轉回原來的位置。我不需要css動畫本身的幫助，所以當鼠標懸停'＃offerblocks4時會觸發第二個動畫。

來源

2016-11-17 Bpriii

你可以把你的代碼在小提琴？ –

請閱讀http://stackoverflow.com/tour，然後閱讀http://stackoverflow.com/help/how-to-ask – mike510a

我很抱歉我的原始問題很混亂，請參閱我的編輯。謝謝任何人提前。 – Bpriii

我不知道你在問什麼 - 但我認爲它的一部分是這樣的？

我可以獲得多少積分？（最好是很多）

#offerblock4+#rotategiggles { 
 
    animation: animationFrames8 linear 0.5s; 
 
    animation-iteration-count: 1; 
 
    transform-origin: 00 00; 
 
    transform: scale(-1.0, -1.0); 
 
    animation-fill-mode: forwards; 
 
    /*when the spec is finished*/ 
 
    -webkit-animation: animationFrames8 linear 0.5s; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-transform-origin: 00 00; 
 
    -webkit-animation-fill-mode: forwards; 
 
    /*Chrome 16+, Safari 4+*/ 
 
    -moz-animation: animationFrames8 linear 0.5s; 
 
    -moz-animation-iteration-count: 1; 
 
    -moz-transform-origin: 0 00; 
 
    -moz-animation-fill-mode: forwards; 
 
    /*FF 5+*/ 
 
    -o-animation: animationFrames8 linear 0.5s; 
 
    -o-animation-iteration-count: 1; 
 
    -o-transform-origin: 100 100; 
 
    -o-animation-fill-mode: forwards; 
 
    /*Not implemented yet*/ 
 
    -ms-animation: animationFrames8 linear 0.5s; 
 
    -ms-animation-iteration-count: 1; 
 
    -ms-transform-origin: 00 0; 
 
    -ms-animation-fill-mode: forwards; 
 
    /*IE 10+*/ 
 
} 
 
#offerblock4:hover+#rotategiggles { 
 
    animation: animationFrames9 linear 0.5s; 
 
    animation-iteration-count: 1; 
 
    transform-origin: 00 00; 
 
    animation-fill-mode: forwards; 
 
    /*when the spec is finished*/ 
 
    -webkit-animation: animationFrames9 linear 0.5s; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-transform-origin: 00 00; 
 
    -webkit-animation-fill-mode: forwards; 
 
    /*Chrome 16+, Safari 4+*/ 
 
    -moz-animation: animationFrames9 linear 0.5s; 
 
    -moz-animation-iteration-count: 1; 
 
    -moz-transform-origin: 0 00; 
 
    -moz-animation-fill-mode: forwards; 
 
    /*FF 5+*/ 
 
    -o-animation: animationFrames9 linear 0.5s; 
 
    -o-animation-iteration-count: 1; 
 
    -o-transform-origin: 100 100; 
 
    -o-animation-fill-mode: forwards; 
 
    /*Not implemented yet*/ 
 
    -ms-animation: animationFrames9 linear 0.5s; 
 
    -ms-animation-iteration-count: 1; 
 
    -ms-transform-origin: 00 0; 
 
    -ms-animation-fill-mode: forwards; 
 
    /*IE 10+*/ 
 
} 
 
@keyframes animationFrames9 { 
 
    0% { 
 
    transform: translate(1px, 1px); 
 
    } 
 
    100% { 
 
    transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
} 
 
@-moz-keyframes animationFrames9 { 
 
    0% { 
 
    -moz-transform: translate(1px, 1px); 
 
    } 
 
    100% { 
 
    -moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
} 
 
@-webkit-keyframes animationFrames9 { 
 
    0% { 
 
    -webkit-transform: translate(1px, 1px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
} 
 
@-o-keyframes animationFrames9 { 
 
    0% { 
 
    -o-transform: translate(1px, 1px); 
 
    } 
 
    100% { 
 
    -o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
} 
 
@-ms-keyframes animationFrames9 { 
 
    0% { 
 
    -ms-transform: translate(1px, 1px); 
 
    } 
 
    100% { 
 
    -ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
} 
 
@keyframes animationFrames8 { 
 
    100% { 
 
    transform: translate(1px, 1px); 
 
    } 
 
    0% { 
 
    transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
} 
 
@-moz-keyframes animationFrames8 { 
 
    100% { 
 
    -moz-transform: translate(1px, 1px); 
 
    } 
 
    0% { 
 
    -moz-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
} 
 
@-webkit-keyframes animationFrames8 { 
 
    100% { 
 
    -webkit-transform: translate(1px, 1px); 
 
    } 
 
    0% { 
 
    -webkit-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
} 
 
@-o-keyframes animationFrames8 { 
 
    100% { 
 
    -o-transform: translate(1px, 1px); 
 
    } 
 
    0% { 
 
    -o-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
} 
 
@-ms-keyframes animationFrames8 { 
 
    100% { 
 
    -ms-transform: translate(1px, 1px); 
 
    } 
 
    0% { 
 
    -ms-transform: translate(5px, 0px) rotate(45deg) scaleY(1.00); 
 
    } 
 
}

<div class="row"> 
 
    <div class="column"> 
 

 
    <a id="offerblock4" href="#"> 
 
     <div class="offer4 fullpic"> 
 

 
     <img src="sm1611_offer4.jpg" style=" position:absolute; z-index:12;"></img> 
 
    </a> 
 

 
    <div id="rotategiggles" style="width:160px; height:auto; padding-left:80px; padding-top:3px;"> 
 
     <img src="GIGGLES_1.png"></img> 
 

 

 
    </div> 
 
    </div>

來源

2016-11-17 04:38:59 mike510a

不完全是我以後發佈這樣一個混亂的問題抱歉，我已經回去，並解釋了自己更好地與原始問題的編輯。儘管如此，感謝你的時間。 – Bpriii

JS保持對CSS選擇器懸停狀態 - CSS動畫，嘗試多個答案，但沒有成功

回答

相關問題