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

此A List Apart Article from 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;
}

Answer 4

它不会像这样工作，将两个图像都作为背景图像：

.bg-img {
    background:url(images/yourImg.jpg) no-repeat 0 0;
}

.bg-img:hover {
    background:url(images/yourImg-1.jpg) no-repeat 0 0;
}

Answer 5

嗨，你应该给父母位置亲属和孩子绝对，并给予绝对等级的高度或宽度

<强>的CSS

  .nkhome{
    margin-left:260px;
    width:59px;
    height:59px;
    margin-top:170px;
    position:relative;
    z-index:0;
}
.nkhome a:hover img{
    opacity:0.0;
}
.nkhome a:hover{
  background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
    width:100px;
    height:100px;
    position:absolute;
    top:0;
    z-index:1;

}

<强> HTML

 <div class="nkhome">
        <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" /></a>
    </div>

现场演示http://jsfiddle.net/t5FEX/7/

或者

<div class="nkhome">
        <a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'" 
            onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
            /></a>
    </div>

现场演示http://jsfiddle.net/t5FEX/9/

Answer 6

以下是一些易于遵循的步骤和一个很棒的悬停教程，它是您可以“玩”并进行实时测试的示例。

http://fivera.net/simple-cool-live-examples-image-hover-css-effect/

Answer 7

解决问题的确切方法

您可以使用内容：网址（“YOUR-IMAGE-PATH”）更改悬停图片;

对于图像悬停，请在css中使用以下行：

img:hover

并使用img：hover：

中的以下配置在悬停时更改图像

img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}

Answer 8

用这个上课。并使用自身宽度和高度制作2个不同的图像。适用于ie9。

请参阅此链接。

http://kyleschaeffer.com/development/pure-css-image-hover/

此外，您可以将2个不同的图像制作并放置在自我类名称中，并悬停在另一个图像中。

参见示例。

 .myButtonLink {
              margin-top: -5px;

    display: block;
    width: 45px;
    height: 39px;
    background: url('images/home1.png') bottom;
    text-indent: -99999px;
              margin-left:-17px;

              margin-right:-17px;

              margin-bottom: -5px;

              border-radius: 3px;
              -webkit-border-radius: 3px;           
}

.myButtonLink:hover {
    margin-top:  -5px;

    display: block;
    width: 45px;
    height: 39px;
              background: url('images/home2.png') bottom;
              text-indent: -99999px;
              margin-left:-17px;

              margin-right:-17px;

              margin-bottom: -20x;

              border-radius: 3px;
              -webkit-border-radius: 3px;
}

如何使图像悬停在CSS？

8 个答案: