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
<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. Apply some :hover
effect to the div directly. 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 :
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.