css - 如何使图像悬停在CSS中？

Question

我想在悬停时将图像从正常更改为更亮，我的代码:

    <div class="nkhome">
        <a href="Home.html"><img src="Images/btnhome.png" /></a>
    </div>
.nkhome{
    margin-left:260px;
    top:170px;
    position:absolute;
    width:59px;
    height:59px;
}
.nkhome a img:hover {
    background:url(Images/btnhomeh.png);
    position:absolute;
    top:0px;
}

为什么悬停不起作用？当我的鼠标悬停在上面时，它会显示第一张图片，而不是悬停图片。

Answer 1

您有一个包含img 标签的a 标签。那是你的正常状态。然后添加一个 background-image 作为悬停状态，它出现在 a 标签的背景中 - 在 img 标签后面。

您可能应该创建一个 CSS Sprite 并使用背景位置，但这应该让您开始:

<div>
    <a href="home.html"></a>
</div>

div a {
    width:  59px;
    height: 59px;
    display: block;
    background-image: url('images/btnhome.png');
}

div a:hover {
    background-image: url('images/btnhomeh.png);
}

这A List Apart Article from 2004仍然相关，并且会给你一些关于 Sprite 的背景，以及为什么使用它们而不是两个不同的图像是个好主意。它比我能向您解释的任何内容都要好得多。