如何使图像悬停在css中？

Posted 2023-03-06

【中文标题】如何使图像悬停在css中？

【英文标题】：How to make image hover in css?

【发布时间】：2012-04-29 11:11:17

【问题描述】：

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

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

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

【问题讨论】：

解决了，只是把背景换成背景图片，然后设置宽高

这里是我找到的一些链接，使用 CSS3 放置一些很酷的效果真的很容易，对于这样的事情：designshack.net/?p=19746css3.bradshawenterprises.com 他们有复制粘贴代码，易于理解。

这里w3schools.com/css/css_image_transparency.asp设置不透明度

找到一个简单的解决方案，其中包含具有四色悬停效果的示例，用于具有百分比计时的菜单 - tinkumax.blogspot.com/2012/11/… 中的演示

【参考方案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);

这个A List Apart Article from 2004 仍然是相关的，并且会给你一些关于精灵的背景，以及为什么使用它们而不是两个不同的图像是一个好主意。写得比我能向你解释的任何东西都要好。

【讨论】：

您只需要在原始样式中为超链接设置宽度/高度，除非您手动覆盖样式，否则样式将传递到悬停伪类:)

但是这个解决方案虽然在技术上很好，但无法访问。有一个链接 (a) 没有文字。

@gulima 是正确的。虽然问题（以及解决方案）并不包括在良好的网络实践中会做的所有事情，但最简单的方法是添加类似于 Jeffrey Zeldman proposes 的文本缩进。

【参考方案2】：

只需这个，不需要额外的 div 或 javascript，只需纯 CSS (jsfiddle demo)：

HTML

<a href="javascript:alert('Hello!')" class="changesImgOnHover">
    <img src="http://dummyimage.com/50x25/00f/ff0.png&text=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;

【讨论】：

聪明。这就是我一直在寻找的。​​span>

2019 年更新：一个变体，也许更现代一点，背景是精灵而不是锚点内的图像jsfiddle

【参考方案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>

【讨论】：

+1 表示体育精神和费心复制所有内容（并记住显示：像我忘记的那样阻止！）

@greenthunder - 那是因为我打错了。 backogrund 不是 CSS 属性。 :) 支持 djlumley 的回答。

【参考方案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;

【参考方案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/

【参考方案6】：

这里有一些易于遵循的步骤和一个很棒的悬停教程，您可以“玩”和现场测试。

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

【参考方案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");

【参考方案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;