如何用:hover做出这种滚动效果？

Question

我正在学习HTML & CSS，并试图创建自己的网站。

我想添加一个滚动效果，当你点击一个图片（或文字）时，另一个图片就会出现并替换掉。当你想看第一张图片时也是一样。

我做到了!

我的代码 。

<div class="animation">
   <a href="#baguette" class="france">
      <img src="france_flag.png" alt="" id="france"/>
   </a>
   <a href="#france" class="baguette">
      <img src="baguette.png" alt="" id="baguette"/>
   </a>
</div>


.animation
{
    display: inline-block;
    width: 120px;
    height: 120px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 30px;
}

.animation img
{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

(我添加了margin和其他元素，因为这只是我网站的一部分)

好吧，当你点击时，它很酷。但我想要的更多：我想让 "动画 "在你把鼠标移到div上面的时候开始。

我已经尝试过这样做了。

<div class="animation">
   <a href="#baguette" class="france">
      <img src="france_flag.png" alt="" id="france"/>
   </a>
   <a href="#france" class="baguette">
      <img src="baguette.png" alt="" id="baguette"/>
   </a>
</div>

(我在 <a> 标签)

.animation
{
    display: inline-block;
    width: 120px;
    height: 120px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 30px;
    overflow: hidden;
}

.animation:hover a.france
{
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.animation:hover a.baguette
{
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.animation img
{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

我不知道用CSS是否可以，但如果可以的话，你能帮帮我吗？我的代码有什么问题？

TIA !

Answer 1

我想用CSS这样的方法，而不是HTML

.animation
{
  background: url(https://www.w3schools.com/html/pic_trulli.jpg) no-repeat;
  display: inline-block;
  width: 500px;
  height: 500px;
  transition: background-position .5s ease-in-out, 
    color .5s ease-in-out;

}

.animation:hover, .animation:focus {
  background: url(https://www.w3schools.com/html/img_girl.jpg) no-repeat;
  background-position: 0 100%;
  display: inline-block;
  width: 500px;
  height: 500px;;
}

<div class="animation">
   <a href="#baguette" class="france">
      <img alt="" id="france"/>
   </a>
</div>