html - 在 div 内悬停时更改图像

Question

DEMO LINK

正如您在上面的链接中看到的，我试图在鼠标悬停时更改图像，但它在 atm 上不起作用。我应该改变什么？家长<div > 上面已经有了一个悬停。

.preview a img:hover{
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png');    
}

Answer 1

您正在尝试更改 <img> 上的背景图像 css标签。 这不会更改“src”属性。 为此，您需要一个 JavaScript 解决方案。

使用 jQuery:

$(".preview a img").hover(function(){
    $(this).attr("src","new-image.jpg")
});

编辑:如果您使用的是 CSS3，并且并非所有浏览器都支持它对您来说没关系，您可以这样做:

.preview a img:hover{
    content:url("new-image.jpg");
}

编辑 2: 工作 fiddle - http://jsfiddle.net/j3xDR/

编辑 3: 由于要求它将通过父 div 工作，这里有一个包含两个选项的完整示例:

http://jsfiddle.net/j3xDR/1/