[英]how to affect previous and next images on image hover
I have a problem that I could not solve, I have this html where I want all the images to spin when I hover on one of them PS: not all the images will have the same speed here is HTML 我有一个我无法解决的问题,我有这个html我希望所有图像在我悬停在其中一个上时旋转PS:并非所有图像都具有相同的速度这里是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>
I could manage to make the next images spin using ~ selector but not the previous ones thank you in advance 我可以设法使用〜选择器使下一个图像旋转但不提前感谢你
If you want all of the images inside a div to spin when you hover one of them, you don't need javascript for this. 如果你希望当你将其中一个图像悬停时,div中的所有图像都会旋转,那么你就不需要javascript了。 Apply some
:hover
effect to the div directly. 将一些
:hover
效果直接应用于div。 You can tune each image's rotation speed : 您可以调整每个图像的旋转速度:
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>
Edit: 编辑:
if jQuery is an option, here's how to do it : 如果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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.