Question

我试图在图像悬停在图像上时会对图像产生悬停效果。当我没有使用锚标签时，我似乎无法使其工作。我的目标是当我将鼠标悬停在按钮上时更改图片，我相信这需要一些jQuery魔法。这是我的代码，只是试图在悬停时更改图像，但不知何故不起作用。我错过了什么吗？

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

Answer 1

这是一个使用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

Answer 2

这不会起作用，因为你把这个类放在一个图像标签上尝试将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/

Answer 3

只能使用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/

Answer 4

如果你想改变从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;
}

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

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

5 个答案: