html - CSS样式:将图像悬停在上方时如何更改图像？

我试图使一个图像悬停的效果，当它被悬停在它将改变为另一个图片。当我不使用锚标签时，我似乎无法让它工作。我的目标是在鼠标悬停在按钮上时改变图片，我相信这需要一些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');
}

最佳答案

这是行不通的，因为你把类放在一个图像标签上，试着把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/