如何在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;
}

为什么鼠标悬停没有效果？当我的鼠标在上面时，显示的是第一张图片而不是悬停图片。

- greenthunder

---

解决方法很简单，只需将背景更改为背景图片，然后设置宽度和高度即可。 - greenthunder

这里有一些我找到的链接，使用CSS3可以很容易地实现一些酷炫的效果，比如这些：http://designshack.net/?p=19746 http://css3.bradshawenterprises.com/ 它们提供复制粘贴的代码，非常易于跟随。 - legendary_rob

请访问此链接以了解如何设置透明度：http://www.w3schools.com/css/css_image_transparency.asp。 - user1723482

寻找一个简单的解决方案，其中包含四种颜色悬停效果的菜单和百分比计时示例 - 在http://tinkumax.blogspot.com/2012/11/simple-css3-hover-transition-menu-effect.html中演示。 - chumego

Answer 1

你有一个包含img标签的a标签，这是正常状态。 然后，您添加了一个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年的一篇A List Apart文章仍然具有参考价值，可以为您提供关于精灵图的背景知识，并解释为什么使用精灵图而不是两个不同的图片是一个好主意。这篇文章的写作质量比我能够向您解释的任何内容都要好得多。

- djlumley

---

你只需要在超链接的原始样式中设置宽度/高度，样式会传递到悬停伪类，除非你手动覆盖它们 :) - djlumley

但是这个解决方案虽然从技术上来说很好，但并不可访问。有一个没有文字的链接（a）。 - gulima

@gulima 没错。虽然这个问题（以及解决方案）并不包括在良好的网络实践中所做的一切，但最简单的方法是添加类似于Jeffrey Zeldman提出的文本缩进。 - djlumley

Answer 2

只需使用纯CSS，无需额外的div或JavaScript（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;
}

- scrypter

---

聪明。这就是我在寻找的东西。 - Syntax Error

更新2019年：一种变体，可能更现代化，背景中有一个精灵而不是锚点内的图像 jsfiddle。 - scrypter

Answer 3

您正在将图像的背景设置为另一个图像。这没问题，但前景（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>

- John Green

---

+1 鼓励体育精神，认真复制所有内容（并记住 display: block，就像我忘记了一样！） - djlumley

@greenthunder - 这是因为我打错了字。backogrund不是CSS属性。: ) 感谢djlumley的回答。 - John Green

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

- Pal Singh

Answer 5

解决您的问题的确切方法

您可以使用content:url("YOUR-IMAGE-PATH")来在悬停时更改图像；

要使用图像悬停，请在您的CSS中使用以下行：

img:hover

并在img:hover中使用以下配置更改悬停时的图像：

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

- Ashish Kwatra

---

太棒了！如果你在2017年后阅读这篇文章，那么这绝对是最好的选择 :) 在我的情况下，我只是希望将这个功能添加到现有的CSS中（更准确地说，是WordPress主题）；而其他解决方案，虽然很可能更兼容古老的浏览器，但需要进行更多的更改... 还请注意，除了更改图像外，您还可以添加其他特效。 - Gwyneth Llewelyn

Answer 6

你好，你应该将父元素的定位设置为相对定位，子元素的定位设置为绝对定位，并且给绝对定位的类设置高度或宽度，就像这样：

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/

- Rohit Azad Malik

Answer 7

以下是一些易于跟随的步骤和一个很棒的悬停教程，其中包括您可以“玩耍”并实时测试的示例。

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

- dzoni

Answer 8

创建一个类，并使用其自身的宽度和高度创建2个不同的图像。可在IE9中运行。

请查看此链接。

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

还有一种方法是，你可以制作两个不同的图片并将其放置在自定义类名中，在鼠标悬停时显示另一张图片。

请参考示例。

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

- Qunect.nl