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

你有一个a包含标签的img标签。那是你的正常状态。然后添加 abackground-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 年的 A List Apart 文章仍然具有相关性，它将为您提供一些有关 sprite 的背景知识，以及为什么使用它们而不是两个不同的图像是一个好主意。它比我能向你解释的任何东西都要好得多。

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 演示）：

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

准确解决您的问题

您可以使用content:url("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 个不同的图像并将其放置在 self 类名称中，并将其他图像悬停在其他图像中。

见例子。

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