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

我有一个我无法解决的问题，我有一个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>

我可以使用~selector使下一个图像旋转，但不能使上一个图像旋转

---

提前谢谢你

如果你想让一个div中的所有图像在你悬停其中一个时旋转，你不需要javascript。将一些

：悬停效果直接应用于div。可以调整每个图像的旋转速度：


div:hover img:n子项（1）{
动画：旋转4s线性无限；
}
分区：悬停图像：第n个子（2）{
动画：旋转7s线性无限；
}
分区：悬停图像：第n个子（3）{
动画：自旋9的线性无限；
}
分区：悬停图像：第n个子（4）{
动画：旋转2s线性无限；
}
@关键帧旋转{100%{-webkit变换：旋转（360度）；变换：旋转（360度）；}}

Ok，这里的确切问题是什么？没有用于“previous”的本机CSS选择器。你最好的选择是将你的
：鼠标悬停在
上，如@Jeremy Thille提供的答案所述谢谢，但我的div中有一些空白区域，我不希望当鼠标在这些区域上时图像旋转。图像之间的div中有一些空格，我不希望当鼠标在空白区域上时图像旋转。那么，jQuery是一个选项吗？因为使用jQuery很容易，但在纯JS中很麻烦。