如何使图像悬停在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

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

你应该创建一个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);
}

这从2004年列表除了文章仍然是相关的,会给你的精灵的一些背景,以及它为什么要改为使用它们两个不同的图像的一个好主意.这比我能解释给你的任何东西都要好得多.

Answer 2

您正在将图像的背景设置为另一个图像.这很好,但前景(IMG的SRC属性)仍覆盖其他所有内容.

.nkhome{
    margin-left:260px;
    top:170px;
    position:absolute;
}
.nkhome a {
    background:url(Images/btnhome.png);
    display:block; /* Necessary, since A is not a block element */
    width:59px;
    height:59px;
}
.nkhome a:hover {
    background:url(Images/btnhomeh.png);
}


<div class="nkhome">
    <a href="Home.html"></a>
</div>

Answer 3

简单来说,不需要额外的div或JavaScript,只需要纯CSS(jsfiddle demo):

HTML

<a href="javascript:alert('Hello!')" class="changesImgOnHover">
    <img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>

CSS

.changesImgOnHover {
    display: inline-block; /* or just block */
    width: 50px;
    background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
    visibility: hidden;
}