如何使用 :hover 制作这种滚动效果？答案

【问题标题】：How to make this scrolling effect with :hover?如何使用 :hover 制作这种滚动效果？
【发布时间】：2020-05-15 14:14:47
【问题描述】：

我正在学习 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;
}

（我添加边距和其他元素，因为它只是我网站的一部分）

好的，当您单击时，它很酷。但我想要更多：我希望“动画”在您将鼠标移到 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！

【问题讨论】：

标签： html css scroll hover smooth-scrolling

【解决方案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>

【讨论】：