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

how to affect previous and next images on image hover

本文关键字：图像 悬停 上一个 下一个 何影响 影响      更新时间：2023-09-26

我有一个问题，我无法解决，我有这个html，我希望所有的图像旋转，当我悬停在其中一个附注:不是所有的图像都有相同的速度这里是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>

我可以设法使下一个图像旋转使用~选择器，但不是以前的提前谢谢大家

如果你想让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>

相关文章：