html - HTML/CSS 图像悬停

Question

我想创建一个简单的图像悬停，AboutUsLink.png但AboutUsColourLink.png我不知道如何。

HTML：

<section class="link1">
    <a href="#SecondLink"><img src="images/LogoAndLinks/AboutUsLink.png"></a>
</section>

CSS：

.link1 {
    height: 100px;
    width: 100px;
    margin: auto;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    margin-top: 35%;
    margin-left: 22%;
    position: absolute;
    z-index: 1;
}

Answer 1

对于 CSS 解决方案，请像这样设置您的元素：

<a href="#SecondLink"><div id="SecondLink"></div></a>

然后使用 CSS 设置div背景

#SecondLink {
    background-image: url('images/LogoAndLinks/AboutUsLink.png');
}

#SecondLink:hover {
    background-image: url('images/LogoAndLinks/AboutUsColourLink.png');
}

看看这个小提琴

Answer 2

<section class="link1">
  <a href="#SecondLink">
     <img src="images/LogoAndLinks/AboutUsLink.png" 
          onmouseover="this.src='images/LogoAndLinks/AboutUsColourLink.png';" 
          onmouseout="this.src='images/LogoAndLinks/AboutUsLink.png';" />
  </a>
</section>