Html 如何悬停URL链接并更改显示图像

如何使以下情况发生？将鼠标悬停在不同的链接上，然后更改右侧的图像。不悬停任何内容都将显示默认图像

#a1:hover~#div{
背景图像：url（“https://homepages.cae.wisc.edu/~ece533/images/arctichare.png”）；
背景重复：无重复；
高度：500px；
}
#a2：悬停#div{
背景图像：url（“https://homepages.cae.wisc.edu/~ece533/images/planet.png”）；
背景重复：无重复；
高度：500px；
}
#a3：悬停#div{
背景图像：url（“https://homepages.cae.wisc.edu/~ece533/images/cat.png”）；
背景重复：无重复；
高度：500px；
}

---

选项1

为每个链接添加一个类，并使用css设置背景图像，如下所示：

CSS

.link-one {
   background: url(***image url one***)
}

.link-two {
   background: url(***image url two***)
}

  .img {
       display: none;
    }
    .link-one:hover img {
       display:block;
    }

等等

选项2

为每个图像制作单独的

标记。在css中，如下所示：

CSS

.link-one {
   background: url(***image url one***)
}

.link-two {
   background: url(***image url two***)
}

  .img {
       display: none;
    }
    .link-one:hover img {
       display:block;
    }

---

你学过javascript吗？尝试使用jquery，它非常简单。我正在考虑我应该使用哪种方法，Javascript、css或jQueryOps抱歉，我编辑了错误的消息请将其更改回来谢谢。您最初的问题没有将js列为标签，因此我为您提供了一个仅限于css的解决方案。我将选择css，非常感谢！兼顾+和~