hover 执行动画没有效果

具体问题如下，我想实现这样一个效果:把鼠标移动到那几个圆点上可以实现图片的切换，比如说鼠标移动到第一个圆点上，显示第一张图片，第二个圆点则是第二张图片。
代码思想: 将鼠标移动到第一个圆点上，让id为 img2的div执行动画picture1 。
但是我加了这段代码后，

#repeat #repeat_p #repeat_p_b #a1:hover ~ #repeat #img2 {
animation: picture1 ease 0.5s forwards;
}

效果并没有实现，这是什么问题呢？还是这种写法根本就不对呢？（这里我只给第一个圆点加了hover）

代码如下:

hover只能控制，自身元素，同级元素，子元素，并不是随便就可以控制的，你这个需要改变代码整个结构
这个功能用JS实现起来比较简单，通过事件获取到对于的DOM元素，进而修改其CSS属性
PS：学完HTML+CSS+JS仿写网页才会游刃有余，HTML框架，CSS渲染，JS交互，各有各的作用

hover 执行动画 没有效果