HTML / CSS图像悬停[重复]答案

【问题标题】：HTML/CSS image hover [duplicate]HTML / CSS图像悬停[重复]
【发布时间】：2013-11-06 09:54:11
【问题描述】：

我想用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;
}

【问题讨论】：

这是非常基本的。请先询问谷歌

标签： html css image hover

【解决方案1】：

<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>

【讨论】：

在这种情况下不推荐使用 javascript。

【解决方案2】：

对于这个问题的 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');
}

看看这个fiddle

【讨论】：

由于某种原因，它不适用于我的图像，但是当我使用比如说 background-color:green; 时它可以工作；
哦，图片路径中缺少引号...查看编辑后的答案
确保您拥有正确的图像路径。该路径将相对于您使用 CSS 的文件。