使用 CSS/HTML 更改悬停图像答案

【问题标题】：Changing image on hover with CSS/HTML使用 CSS/HTML 更改悬停图像
【发布时间】：2013-09-19 17:37:13
【问题描述】：

我有这个问题，我设置了一个图像以在鼠标悬停时显示另一个图像，但是第一个图像仍然出现，新的图像不会改变高度和宽度并与另一个图像重叠。我对 HTML/CSS 还是很陌生，所以我可能错过了一些简单的东西。代码如下：

<img src="LibraryTransparent.png" id="Library">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

【问题讨论】：

标签： html css image hover

【解决方案1】：

另一种选择是使用JS：

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

【讨论】：

虽然这是在复活一个旧的解决方案，但在 HTML 中嵌入样式确实是一种不好的做法。所有样式信息都应包含在样式标记内的 HTML 文件顶部，或从外部样式表链接。
有没有办法平滑过渡img？
@thedigitalmouse 好点，我已经更新了我的答案并删除了 CSS
@CliffVandyck 你可以使用 jQuery 动画来做到这一点

【解决方案2】：

一种解决方案是将第一张图片也用作背景图片，如下所示：

<div id="Library"></div>

#Library {
   background-image: url('LibraryTransparent.png');
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

如果您的悬停图像大小不同，您必须像这样设置它们：

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
   width: [IMAGE_WIDTH_IN_PIXELS]px;
   height: [IMAGE_HEIGHT_IN_PIXELS]px;
}

【讨论】：

谢谢，这也会改变悬停时新图像的高度和宽度吗？
如果你的悬停图像有不同的尺寸，你必须写出来。
我完全按照所示尝试了您的解决方案，由于某种原因，尽管尺寸没有改变，但悬停仍然有效
是的，我阅读了更新，所以我将我的 img 标签更改为 div，然后将您在此处的内容复制下来。它修复了悬停，但第一个图像或悬停图像都没有改变大小我不知道为什么？
不，我的意思是“如果您的图像大小不同，您必须像这样设置它们：”部分...

【解决方案3】：

我通常做的是创建具有两种状态的双图像，就像一种双帧电影，然后我将其用作原始元素的背景，以便元素具有以像素为单位设置的宽度/高度，导致只显示图像的一半。那么悬停状态定义的基本上就是“移动影片以显示另一帧”。

例如，假设图像必须是灰色 Tux，我们需要在悬停时将其更改为彩色 Tux。而“宿主”元素是一个 id 为“tuxie”的跨度。

我用两件燕尾服创建了 50 x 25 的图像，一件是彩色的，另一件是灰色的，
然后将图像指定为 25 x 25 跨度的背景，
最后将悬停设置为简单地将背景向左移动 25 像素。

最少的代码：

<style>
    #tuxie {
        width: 25px; height: 25px;
        background: url('images/tuxie.png') no-repeat left top;
    }
    #tuxie:hover { background-position: -25px 0px }
</style>

<div id="tuxie" />

还有图片：

优点是：

通过将两个帧放在一个文件中，可以确保它们被加载立刻。这避免了当连接速度较慢时出现的丑陋故障其他框架永远不会立即加载，所以第一次悬停永远不会正常工作。
由于“配对”帧，以这种方式管理图像可能更容易永远不会混淆。
通过巧妙地使用 Javascript 或 CSS 选择器，可以扩展它并在一个文件中包含更多帧。

理论上，您甚至可以将多个按钮放在单个文件中并进行管理它们按坐标显示，尽管这种方法可能很快失控。

请注意，这是使用background CSS 属性构建的，因此如果您确实需要使用<img />s，则必须不设置src 属性，因为它与背景重叠。（想想这里巧妙地使用透明度可能会产生有趣的结果，但可能很大程度上取决于图像质量以及引擎的质量。）。

【讨论】：

+1 用于使用“sprites”，Sprites 正在使页面加载速度更快，可以帮助为现有网站创建 sprites 的一个很好的在线工具是 SpriteMe，它非常有用，因为它可以更快地创建 sprites将为您创建新的 CSS 和图像。

【解决方案4】：

使用content:

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
    height: 70px;
    width: 120px;
}

JSFiddle

【讨论】：

我认为这是最好的解决方案。它更简单，使用正确的标签，并且不必担心后台重复和类似的东西。
我发现这取决于浏览器。适用于 Chrome，但不适用于 Firefox 或 IE11。
@Chaz 检查Browser compatibility。
@Vucko，我认为兼容性问题与在不是 :before 或 :after 的东西上使用 content 属性有关。从浏览器兼容性链接： content CSS 属性与 ::before 和 ::after 伪元素一起使用以在元素中生成内容。在 Firefox 或 IE 中尝试上面的 JSFiddle；它不起作用。
这是最好的答案。非常感谢。

【解决方案5】：

.hover_image:hover {text-decoration: none} /* Optional (avoid undesired underscore if a is used as wrapper) */
.hide {display:none}
/* Do the shift: */
.hover_image:hover img:first-child{display:none}
.hover_image:hover img:last-child{display:inline-block}

<body> 
    <a class="hover_image" href="#">
        <!-- path/to/first/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_silverstone_2016.jpg" />
        <!-- path/to/hover/visible/image: -->
        <img src="http://farmacias.dariopm.com/cc2/_cc3/images/f1_malasia_2016.jpg" class="hide" />
    </a>
</body>

为了改进这个 Rashid 的好答案，我添加了一些 cmets：

技巧是在要交换的图像的包装上完成的（这次是一个'a'标签，但可能是另一个），所以'hover_image'类已经放在那里。

优点：

如果需要更改，将两个图片网址放在同一位置会有所帮助。
似乎也可以与旧导航器一起使用（CSS2 标准）。
这是不言自明的。
预加载悬停图像（悬停后无延迟）。

【讨论】：

【解决方案6】：

之前所有答案的问题是悬停图像没有随页面加载，所以当浏览器调用它时，加载需要时间，而且整个事情看起来并不好。

我所做的是将原始图像和悬停图像放在 1 个元素中，并首先隐藏悬停图像。然后在悬停时显示悬停图像并隐藏旧图像，在悬停时执行相反的操作。

HTML：

<span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')">
  <img src="stylesheets/images/bell.png" class=bell col="g">
  <img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b">
</span>

JavaScript/jQuery：

function hvr(dom, action)
{
    if (action == 'in')
    {
        $(dom).find("[col=g]").css("display", "none");
        $(dom).find("[col=b]").css("display", "inline-block");
    }

    else
    {
        $(dom).find("[col=b]").css("display", "none");
        $(dom).find("[col=g]").css("display", "inline-block");
    }
}

这对我来说是最简单和最有效的方法。

【讨论】：

【解决方案7】：

您可以替换 HTML IMG 的图像，而无需对容器 div 进行任何背景图像更改。

这是使用 CSS 属性 box-sizing: border-box; 获得的（它使您可以非常有效地在 <IMG> 上放置一种悬停效果。）

为此，将这样的类应用于您的图像：

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */
  width: 180px;
  height: 236px;
  padding-left: 180px;
}

示例代码：http://codepen.io/chriscoyier/pen/cJEjs

原文： http://css-tricks.com/replace-the-image-in-an-img-with-css/

希望这将帮助一些不想放置 div 以获得具有“悬停”效果的图像的人。

在这里发布示例代码：

HTML：

<img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement">

jQuery:

$("#myImage").mouseover(function () {
    $(this).attr("class", "image-replacement");
});
$("#myImage").mouseout(function () {
    $(this).attr("class", "ClassBeforeImage-replacement");
});

【讨论】：

有人否决了我的回答。请解释你为什么要让我理解和改进答案。

【解决方案8】：

您不能使用 CSS 来更改图像 SRC 属性（除非浏览器支持）。您可能希望将 jQuery 与悬停事件一起使用。

$("#Library ").hover(
    function () {
         $(this).attr("src","isHover.jpg");
    },
    function () {
        $(this).attr("src","notHover.jpg");
    }
);

【讨论】：

【解决方案9】：

将img 标记更改为 div 并在 CSS 中为其添加背景。

【讨论】：

【解决方案10】：

试一试

<img src='images/icons/proceed_button.png' width='120' height='70' onmouseover="this.src='images/icons/proceed_button2.png';" onmouseout="this.src='images/icons/proceed_button.png';" />

或者如果您使用图像作为表单中的按钮

<input type="image" id="proceed" src="images/icons/proceed_button.png" alt"Go to Facebook page" onMouseOver="fnover();"onMouseOut="fnout();" onclick="fnclick()">
function fnover()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button2.png";
        }

        function fnout()
        {
            var myimg2 = document.getElementById("proceed");
            myimg2.src = "images/icons/proceed_button.png";
        }

【讨论】：

【解决方案11】：

.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}

<body> 
    <a class="foo" href="#">
        <img src="http://lojanak.com/image/9/280/280/1/0" />
        <img src="http://lojanak.com/image/0/280/280/1/0" />
    </a>
</body>

【讨论】：

添加一些描述/cmets，简单地发布代码不会有帮助

【解决方案12】：

检查这个fiddle

我认为您的情况可能是图像路径错误

语法看起来不错

background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');

【讨论】：

【解决方案13】：

问题是您通过 'src' 属性设置了第一张图片，并在悬停时向图片添加了背景图片。试试这个：

在html中使用：

<img id="Library">

然后在css中：

#Library {
    height: 70px;
    width: 120px;
    background-image: url('LibraryTransparent.png');
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}

【讨论】：

谢谢，我需要改变什么来解决这个问题？
您的解决方案适用于悬停，但图像的大小没有改变？
你想改变它吗？如果是，只需将正确的大小添加到 :hover 类中。

【解决方案14】：

以你做事的方式，它不会发生。您正在更改图像的背景图像，该图像被原始图像阻挡。改变高度和宽度也不会发生。要更改图像的 src 属性，您需要 Javascript 或 jQuery 等 Javascript 库。但是，您可以将图像更改为简单的 div（文本）框，并在悬停时更改背景图像，即使 div 框本身是空的。方法如下。

<div id="emptydiv"></div>

#emptydiv {

background-image: url("LibraryHover.png");
height: 70px;
width: 120px;

}

#emptydiv:hover {

background-image: url("LibraryHoverTrans.png");
height: 700px;
width: 1200px;

}

我希望这是您的要求:)

【讨论】：

嗨，我一直在尝试这个解决方案，它解决了悬停问题，但不能解决它们保持不变的大小我该怎么办？
似乎对我有用。我们可以看看你的代码吗？这是我的：jsfiddle.net/kHBzh

【解决方案15】：

每个人都使用背景图像选项回答他们缺少一个属性。高度和宽度将设置图像的容器大小，但不会调整图像本身的大小。需要背景大小来压缩或拉伸图像以适合此容器。我使用了“最佳答案”中的示例

<div id="Library"></div>
#Library {
   background-image: url('LibraryTransparent.png');
   background-size: 120px;
   height: 70px;
   width: 120px;
}

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}

【讨论】：

【解决方案16】：

我的 jquery 解决方案。

function changeOverImage(element) {
        var url = $(element).prop('src'),
            url_over = $(element).data('change-over')
        ;

        $(element)
            .prop('src', url_over)
            .data('change-over', url)
        ;
    }
    $(document).delegate('img[data-change-over]', 'mouseover', function () {
        changeOverImage(this);
    });
    $(document).delegate('img[data-change-over]', 'mouseout', function () {
        changeOverImage(this);
    });

和html

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />

演示：JSFiddle demo

问候

【讨论】：

【解决方案17】：

实时示例：JSFiddle

接受的答案有问题。图像没有在那里调整大小。使用 background-size 属性调整图像大小。

HTML：

<div id="image"></div>

CSS：

#image {
   background-image: url('image1');
   background-size: 300px 390px;
   width: 300px;
   height:390px;
}

#image:hover{
  background: url("image2");
  background-size: 300px 390px;
}

【讨论】：

【解决方案18】：

我建议尽可能只使用 CSS。我的解决方案是：

HTML：

<img id="img" class="" src="" />

CSS：

img#img{
    background: url("pictureNumberOne.png");
    background-size: 100px 100px;
    /* Optional transition: */
    transition: background 0.25s ease-in-out;
}
img#img:hover{
    background: url("pictureNumberTwo.png");
    background-size: 100px 100px;
}

那（未定义 src 属性）还确保正确显示透明图像（或具有透明部分的图像）（否则，如果第二张图片是半透明的，您还会看到第一张图片的部分）。

background-size 属性用于设置背景图像的高度和宽度。

如果（出于任何原因）您不想更改图像的 bg-image，您也可以将图像放入 div-container 中，如下所示：

HTML：

<div id="imgContainer" class="">
    <img id="" class="" src="" />
</div>

...等等。

【讨论】：

【解决方案19】：

使用“内容：;”在悬停时。这行得通。

【讨论】：

你应该添加更多关于你的答案的细节

【解决方案20】：

只需使用 Photoshop 并创建两个相同的图像，第一个是您希望它的外观，第二个是您希望它悬停时的外观。我将图像包装在<a> 标记中，因为我假设这是您想要的。对于这个例子，我正在做一个去饱和的 facebook 图标，但是当将鼠标悬停在它上面时会显示 facebook 的蓝色。

<a href="www.facebook.com"><img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"></a>

【讨论】：

这需要javascript； OP 没有要求提供 css/html 解决方案吗？

【解决方案21】：

这是一个简单的技巧。只需复制并粘贴即可。

<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Change Image on Hover in CSS</title>
    <style type="text/css">
        .card {
            width: 130px;
            height: 195px;
            background: url("../images/card-back.jpg") no-repeat;
            margin: 50px;
        }
        .card:hover {
            background: url("../images/card-front.jpg") no-repeat;
        }
    </style>
    </head>
    <body>
        <div class="card"></div>
    </body>
    </html>

【讨论】：

【解决方案22】：

我也遇到过类似的问题。

我的按钮定义如下：

<button  id="myButton" class="myButtonClass"></button>

我的背景样式是这样的：

#myButton{ background-image:url(img/picture.jpg)}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

当我把它切换到：

#myButton{}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}

悬停功能效果很好。

（不涉及其他属性，如图像或容器的大小和位置，只是背景图像发生变化）

【讨论】：