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

我试图在图像悬停时将图像悬停效果更改为另一张图像。当我不使用锚标记时，似乎无法使其工作。我的目标是当我将鼠标悬停在按钮上时改变图片，我相信这需要一些jQuery魔法。这里是我的代码，只是试图改变图像时，盘旋，但不知何故不工作。我错过了什么吗？CSS样式：如何更改图像时，它是悬停？

HTML 
<div> 
<img src="images/newpic.png" class="img-circle homeimage" alt="Responsive image"/> 
</div> 

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

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

来源

2015-02-23 TL12321

可以实现它没有jQuery的 – PRAH 2015-02-23 05:51:25

要更改HTML中的悬停背景图像或图像？ – PRAH 2015-02-23 05:52:12

为什么你把图像放在html和css背景中。 – vivek 2015-02-23 05:53:23

这里是使用jQuery
的一个实例：这可以让你使用hover与image标签无论容器是：

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" alt="rajkumar" class="imgh"></img>

Live Demo

来源

2015-02-23 05:55:27

非常感谢！出于某种原因，所有的css选项都不起作用，但jQuery的功能就像一个魅力。 jQuery的魔力太强大了。 – TL12321 2015-02-24 01:16:05

这不会工作，因为你把类的图像标记尝试使IMG成一个div，并给它的高度和宽度看看这个js小提琴

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

来源

2015-02-23 05:55:52 Enjayy

你只能用CSS来解决。

HTML

<img class="img-circle homeimage" alt="Responsive image"/>

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

DEMO：http://jsfiddle.net/ymyL949n/

来源

2015-02-23 05:57:58 Stella

如果你想改变它从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" alt="Responsive image"/> 
    </div> 

    <div class="hover"> 
     <img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" alt=""> 
    </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; 
}

来源

2015-02-23 05:58:05 PRAH

你可以做到这一点使用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/

来源

2015-02-23 05:58:19

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

回答

相关问题