Question

我有一个我无法解决的问题，我有这个html，当我将鼠标悬停在其中一个上时，我希望所有图像旋转 P.S：并非所有图像都具有相同的速度这是HTML

<div >
<img id="first" class="pedal turnright" />
<div class="space"/>
<img id="second" class="pedal turnright"  />
<div class="space"/>
<img id="third" class="pedal turnleft"   />
<div class="space"/>
<img id="fourth" class="pedal turnleft"  />
</div>

我可以设法使用〜选择器使下一个图像旋转，但不能使用之前的图像提前谢谢你

Answer 1

如果你希望当你将其中一个图像悬停时，div中的所有图像都会旋转，那么你就不需要javascript了。直接对div应用一些:hover效果。您可以调整每个图像的旋转速度：

div:hover  img:nth-child(1){
       animation:spin 4s linear infinite;
   }
div:hover  img:nth-child(2){
       animation:spin 7s linear infinite;
   }
div:hover   img:nth-child(3){
       animation:spin 9s linear infinite;
   }
div:hover   img:nth-child(4){
       animation:spin 2s linear infinite;
   }


@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<div>
  <img src="https://placekitten.com/80/80"/>
  <img src="https://placekitten.com/80/80" />
  <img src="https://placekitten.com/80/80"/>
  <img src="https://placekitten.com/80/80"/>
</div>

修改

如果jQuery是一个选项，这里是如何做到的：

var $imgs = $("img") $imgs.hover( function(){ $imgs.addClass("rotating"); }, function(){ $imgs.removeClass("rotating"); });

img{ margin-right: 50px; } img.rotating{ animation:spin 4s linear infinite; } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img src="https://placekitten.com/80/80"/> <img src="https://placekitten.com/80/80" /> <img src="https://placekitten.com/80/80"/> <img src="https://placekitten.com/80/80"/> </div>

如何影响图像上的上一张和下一张图像悬停

1 个答案: