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动画，尝试多个答案，但没有成功

回答

相关问题