CSS样式：悬停时如何更改图像？

Posted 2023-05-08

【中文标题】CSS样式：悬停时如何更改图像？

【英文标题】：CSS Styling: How to change the image when it is hovered over?

【发布时间】：2015-04-24 09:50:05

【问题描述】：

我正在尝试对图像进行悬停效果，当它悬停在图像上时，它将变为另一张图片。当我不使用锚标签时，我似乎无法让它工作。我的目标是当我将鼠标悬停在按钮上时改变图片，我相信这需要一些 jQuery 魔法。这是我的代码，用于在悬停时尝试更改图像但不知何故不起作用。我错过了什么吗？

html
<div>
<img src="images/newpic.png" class="img-circle homeimage" /> 
</div>

CSS
.homeimage 
    height:200px;
    width: auto;
    background-image: url('../images/newpic.png');


.homeimage:hover 
    background-image: url('../images/funnypic.png');

【问题讨论】：

不用jquery也可以实现

您要更改悬停背景图片或html中的图片？

为什么要把图片放在 html 和 css 中作为背景。

Changing image on hover with css/html的可能重复

【参考方案1】：

这行不通，因为您将类放在图像标签上尝试将 img 放入 div 并给它一个高度和宽度，看看这个 js fiddle

.container
    width 100%;
    height: 500px;


.picture 
    height:500px;
    width: 500px;
    background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg');
    background-repeat:no-repeat;


.picture:hover 
    background-image: url('http://www.online-image-editor.com//styles/2014/images/example_image.png');

<div class="container">
    <div class="picture">
        
    </div>
    
</div>

http://jsfiddle.net/kriscoulson/a0dodtjn/1/

【参考方案2】：

只有CSS才能解决。

HTML

<img class="img-circle homeimage" /> 

CSS

.homeimage 
    height:200px;
    width: auto;
    background: url('https://www.google.co.kr/images/hpp/lightbulb-icon-39x39.png') no-repeat;


.homeimage:hover 
    background: url('http://www.google.com/images/logos/url_shortener_logo.gif') no-repeat;

演示：http://jsfiddle.net/ymyL949n/

【参考方案3】：

如果您想更改从 html 调用的 img，您可以在没有 jquery 和 javascript 的情况下尝试此解决方案。 http://jsbin.com/sujigakeru/8/edit

HTML

 <div class="container">

    <div class="content">
      <img src="http://www.makemenoise.com/wp-content/uploads/2012/08/wordpress-logo-200x200.png" /> 
    </div>

    <div class="hover">
      <img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" >
    </div>

  </div>

CSS

.container
  width:200px;
  height:200px;
  position:relative;


.hover
  display:none;
  position:absolute;
  top:0;
  left:0;
  z-index:1;

.container:hover .hover
  display:block;

【参考方案4】：

这是一个使用 Jquery 的示例：这允许您使用带有 image 标记的 hover，无论容器是什么：

jQuery

$(document).ready(function () 
    $('.imgh')
        .mouseover(function () 
        $(this).attr("src", "http://taditdash.files.wordpress.com/2014/01/tadit-dash.jpg");
    )
        .mouseout(function () 
        $(this).attr("src", "http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
    );
);

HMTL

<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif"  class="imgh"></img>

Live Demo

【讨论】：

非常感谢！出于某种原因，所有 css 选项都不起作用，但 jQuery 就像一个魅力。 jQuery 魔法太强了。

【参考方案5】：

您也可以使用 css 来实现这一点。您需要在按钮悬停时更改背景图片：

CSS：

img 
    display:block;
    width:400px;
    height:300px;
    background-image:url("http://lorempixel.com/600/200/sports/1/")

.css:hover ~ img 
    background-image:url("http://lorempixel.com/600/200/sports/2/")


<button class="css">CSS</button>
<img src="/image.png" />

确保元素顺序保持不变。按钮应该在图片之前。

演示：http://jsfiddle.net/lotusgodkk/GCu2D/573/