如何在CSS中使图像悬停？

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

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

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

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

您可能应该创建一个 CSS 精灵并使用背景位置，但这应该可以帮助您开始：

<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);
}

This 2004 年的另类文章列表仍然相关，并且会给您一些有关精灵的背景知识，以及为什么使用它们而不是两个不同的图像是个好主意。它比我能向你解释的任何东西都写得好得多。