在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： 工作小提琴 - http://jsfiddle.net/j3xDR/

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

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

Answer 2

正如 Shay Elkayam 的回答所建议的，您可以在现代浏览器中使用 content 属性来实现这一点。

如果浏览器支持有问题，那么我建议使用<div> 代替<img> 标签并在悬停时更改divs 背景属性。

这是一个有效的fiddle

更新：

如果您想更改父 div 悬停时的图像，请修改 css 选择器，如下所示：fiddle

Answer 3

根据 HTML 代码，CSS 不匹配： 使用.preview a img 将是错误的，因为您在CSS 中的a 标记中调用img 标记。

但是，您的 HTML 表明您在 div 中有 img 标记，class=preview 和 a 标记是最重要的。

有多种方法可以实现输出。最简单的方法之一如下：

编辑：根据评论，编辑后的脚本发布如下：

 $(".preview").hover(function() {
    $(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png")
    }, function() {
    $(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/b/b3/Solid_gray.png")

    })

如果您不使用 CSS3，请在您的 HTML 中添加 jQuery 并编写上述脚本。

Fiddle Demo也被修改了

Answer 4

如果您对 css 进行一些修改，您也可以在 css 中做同样的事情

检查这个更新的小提琴

http://jsfiddle.net/gw6w9/1/

在.preview img 规则中，我也将高度设置为45px，因为实际图像为200px x 200px，而您将宽度设置为45px，这意味着它将高度缩放为45px好吧，我也将background-image 设置为初始图像。所以当它加载灰色图像时加载。

我还将您的规则 .preview a img:hover 修改为 .preview:hover img 因为

1) 我在.preview 下看不到a

2) 无论如何，您都将鼠标悬停在 div 上。

在此规则下，您可以将background-image 设置为新网址。

希望这对你有用

Answer 5

根据其他人给出的相关答案，我修改了一个小改动，没有任何额外的 javascript 或 css。它适用于所有版本

<a href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC" onmouseover="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC'" onmouseout="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABJklEQVR4Ae3VPYrbUBRA4a+RJ1VSJswvGG8mhYsswRhtxT/YmNEuhtEiAmpcJjBJOQsYyyBMsF0qXcjDjNF7pAnJOd0tTqN3r/yLfPCsFfrsvUje+ao91RdvRfBGpX3Fzy6c4UKh0Ua6U+gJKLSJFgKa5FAjoE23W6hRWpp4UKeHNnIZgMzIS0rom1shXHqKDW3cgoHC2tq9PriyiQvl4JPjr8nBEIxjQo0MA8dguneHTN09VL7ySBfgsXtoCdYnoQpMu4cmZ0Oz7qEHcH8SmoOye6iWoe8QTH+4QWYb8/lHYGj/W+YjyOPe0YtLcGehUpm7Adfq2BV5coWQa9/TlnYcLG2uTj8jtUdTM6VtxBlJNGCXnGn+1PFfCegl/Y4aKz1/Lf/5CShXgVKz4A8DAAAAAElFTkSuQmCC'" border="0" alt=""/></a>

演示

http://jsfiddle.net/ssuryar/wcmHu/468/