使用CSS / HTML在悬停时更改图像

77

我有一个问题，我将一个图像设置为当鼠标悬停时显示另一个图像，但是第一个图像仍然出现，新的图像不会更改高度和宽度，而会与另一个图像重叠。我对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 
— 用户名
source

Answers:

88

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

<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;
}
— 奥雷利奥·德·罗莎（Aurelio De Rosa）
source
谢谢，这还会改变悬停时新图像的高度和宽度吗？
— user2704743 2013年
如果悬停图像的大小不同，则必须编写它们。
— Aurelio De Rosa 2013年
我完全按照所示尝试了您的解决方案，由于某种原因，尽管大小没有改变，但悬停仍然有效
— user2704743 2013年
是的，我阅读了此更新，因此我将img标签更改为div，然后复制了此处的内容。它固定了悬停，但是第一张图像或悬停图像都没有改变大小，我不确定为什么？
— user2704743 2013年
不，我的意思是“如果您的上方图片尺寸不同，则必须将其设置为：” part ...
— Aurelio De Rosa 2013年
99

另一种选择是使用JS：

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />
— kurdtpage
source
5
尽管这正在恢复旧的解决方案，但将样式嵌入HTML确实是一个不好的做法。所有样式信息应包含在HTML文件顶部的样式标签内，或从外部样式表链接。
— 数字鼠标
有没有办法顺利过渡img？
— CliffVandyck '17
@thedigitalmouse好点，我已经更新了答案并删除了CSS
— kurdtpage
@CliffVandyck，您可能可以使用jQuery动画来做到这一点
— kurdtpage
49

我通常要做的是创建两种状态的双重图像，就像两帧胶片一样，然后将其用作原始元素的背景，以使元素的宽度/高度设置为像素，从而显示仅图像的一半。然后，悬停状态定义的基本上是“移动影片以显示另一帧”。

例如，假设图像必须是灰色Tux，我们需要在悬停时更改为彩色Tux。并且“托管”元素是ID为“ tuxie”的跨度。

  1. 我用两个Tux创建一个50 x 25的图像，一个是彩色，另一个是灰色，
  2. 然后将图像指定为25 x 25跨度的背景，
  3. 最后将悬停设置为仅将背景左移25px。

最小代码：

<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" />

和图像：

两幅Tuxie“电影”

优点是：

  • 通过将两个框架都放在一个文件中，可以确保立即加载它们。这样可以避免在另一个框架从不立即加载时，较慢的连接上出现的小故障，因此第一个悬停永远无法正常工作。

  • 由于“成对”的帧永远不会混淆，因此以这种方式管理图像可能会更容易。

  • 通过巧妙地使用Javascript或CSS选择器，可以扩展此范围，并在一个文件中包含更多帧。

    从理论上讲，您甚至可以将多个按钮放在单个文件中，并通过坐标控制它们的显示，尽管这种方法可能很快就失控了。

请注意，这是使用backgroundCSS属性构建的，因此，如果您确实需要与<img />s一起使用，则不要设置该src属性，因为该属性与背景重叠。（有人认为在这里巧妙地使用透明度可能会产生有趣的结果，但可能非常依赖于图像以及引擎的质量。）

— 阿洛瓦·马哈达（Alois Mahdal）
source
2
+1用于使用“ sprite”，Sprite使页面加载更快，SpriteMe是一个很好的在线工具，可以帮助为现有网站创建sprite，它可以为您创建新的CSS和图像，因此可以更快地创建sprite。
— jagb
33

用途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

— Vucko
source
1
我认为这是最好的解决方案。它更简单，使用正确的<img>标记，并且不必担心背景重复和类似的事情。
— 隆巴斯
2
我发现这取决于浏览器。可在Chrome浏览器中使用，但不能在Firefox或IE11中使用。
— Chaz
@Chaz检查浏览器兼容性。
— Vucko
@Vucko，我认为兼容性问题是关于在非：before或：after之后的内容上使用content属性的。从浏览器兼容性链接：content CSS属性与:: before和:: after伪元素一起使用，以在元素中生成内容。在Firefox或IE中尝试上面的JSFiddle；这没用。
— Chaz
7 

.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的良好答案，我添加一些评论：

技巧是在要交换的图像的包装上完成的（这次是'a'标签，但也许是另一个），因此将'hover_image'类放在了那里。

好处：

  • 如果需要更改，将两个图像放在同一位置会很有帮助。

  • 似乎也可以与旧的导航器一起使用（CSS2标准）。

  • 这是不言自明的。

  • 悬停图像已预加载（悬停后无延迟）。

— 达里奥·Pm
source
4

先前所有答案的问题在于，悬停图像未随页面一起加载，因此当浏览器调用它时，加载时间很长，整个外观看起来并不好。

我要做的是将原始图像和悬停图像放入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");
    }
}

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

— Y2H
source
3

您可以替换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");
});
— 尼山斯·陕
source
有人拒绝了我的回答。请说明为什么您不赞成我理解和改进答案。
— Nishanth Shaan
2

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

$("#Library ").hover(
    function () {
         $(this).attr("src","isHover.jpg");
    },
    function () {
        $(this).attr("src","notHover.jpg");
    }
);
— 阿萨夫
source
1 

.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>
展开摘要

— 拉希德
source
2
添加一些描述/注释，只需张贴代码就无济于事
— piyushj16年
0

问题是您通过'src'属性设置了第一张图像，并且将鼠标悬停在背景图像上。试试这个：

在html中使用： 

<img id="Library">

然后在CSS中：

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

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
}
— 汤山
source
谢谢，我需要更改以解决此问题？
— user2704743 2013年
您的解决方案与悬停一起使用，但是图像的大小没有改变吗？
— user2704743 2013年
是否要更改？如果是的话，只需将：hover类添加到正确的大小即可。
— Tomzan 2013年
0

以您做事的方式，它不会发生。您正在更改图片的背景图片，该图片已被原始图片遮挡。更改高度和宽度也不会发生。要更改图片的src属性，您需要使用Javascript或Javascript库（例如jQuery）。但是，您可以将图像更改为简单的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;

}

我希望这就是您要的:)

— 丹尼尔·施瓦兹
source
嗨，我一直在尝试此解决方案，它可以解决悬停问题，但不能解决它们保持相同大小的问题，我该怎么办？
— user2704743 2013年
似乎为我工作。我们可以看到您的代码吗？这是我的：jsfiddle.net/kHBzh
— Daniel Schwarz
0

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

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

#Library:hover {
   background-image: url('LibraryHoverTrans.png');
}
— Fi Horan
source
0

尝试其中之一 

<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";
        }
— Adiii
source
0

我的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演示

问候

— iBet7o
source
0

实时示例：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;
}
— 拉菲博士
source
0

我建议尽可能使用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属性）还可以确保正确显示透明图像（或具有透明部分的图像）（否则，如果第二张图片是半透明的，您还将看到第一张图片的一部分）。

的背景大小属性用于设置高度和宽度的背景图像的。

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

HTML：

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

... 等等。

— j3141592653589793238
source
-1

只需使用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>
— 丰利
source
1
这需要javascript; OP没有要求CSS / HTML解决方案吗？
— m02ph3u5'1
-1

这是简单的把戏。只需复制并粘贴即可。

<!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>
— 洛克斯·塔库尔（Lokesh Thakur）
source
-1

我有一个类似的问题。

我的按钮定义如下：

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

悬停功能运行正常。

（不处理其他属性，例如图像或容器的大小和位置，只是背景图像在变化）

— 狼盾
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.