如何在悬停时同时旋转两个图像 [英] How do I rotate two images simultaneously upon hover

问题描述

我试图获取两个图像，两个图像都以相反的方向旋转，在悬停在覆盖两个图像的区域上时同时旋转，这样两个图像在不悬停在该区域上时会暂停，如果这样做则会恢复。我在下面创建了一个jsfiddle，展示了我想要实现的目标（尽管它适用于每个单独的图像），但我不确定是否需要使用JavaScript以及采取何种方法。



http://jsfiddle.net/bq8u6g6w/4/

解决方案

是的，这是可能的：



您需要将两个图像包装在一个容器中：

 <   div     id   =  divWrapper > ;  
 <   div     class   = 贴纸 >  <   img    样式  =  border-radius：130px ;    src   =  http://i.imgur.com/pP32yO8.png    /  >  <   / div  >  
 <   div     style   = 已删除：relative; removed26px; removed26px    class   =  sticker2 >  <   img     style   =  border-radius：104px;     src   =  http://i.imgur.com/1xHMFDI.png    /  >  <   / div  >  
 <   / div  >  

然后您申请动画类到t他像这样悬停容器的状态：

＃ divWrapper：hover 。贴纸 {
  / *  切换我们的当我们将鼠标悬停在贴纸上时动画播放状态运行* /  
  animation-play-state  ： 正在运行;  
} 

我已经更新了你的小提琴（根据你原来的，这只适用于IE浏览器）



http://jsfiddle.net/bq8u6g6w/8/ [ ^ ]

I am trying to get two images, both of which rotate in opposite directions, to rotate simultaneously upon hovering over an area covering both images so that both images pause when not hovering over the area and resume if doing so. I've created a jsfiddle below demonstrating what I'm kind of trying to achieve (although it's for each separate image), but I'm not sure whether or not JavaScript is required to do it and what approach to take.

http://jsfiddle.net/bq8u6g6w/4/

解决方案

Yes this is possible:

You need to wrap both images in a container:

<div id="divWrapper">
<div class="sticker"><img style="border-radius:130px;" src="http://i.imgur.com/pP32yO8.png" /></div> 
<div style="removed:relative;removed26px;removed26px" class="sticker2"><img style="border-radius:104px;" src="http://i.imgur.com/1xHMFDI.png" /></div>
</div>

You then apply your animation classes to the hover state of the container like this:

#divWrapper:hover .sticker {
  /* Toggle our animation play state to running when we are hovering over our sticker */
  animation-play-state: running;
}

I've updated your fiddle (As per your original, this only works in IE)

http://jsfiddle.net/bq8u6g6w/8/[^]

这篇关于如何在悬停时同时旋转两个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！