Question

正如您在上面的链接中看到的那样，我正在尝试在鼠标悬停时更改图像，但它不能正常工作。我应该改变什么？父<div＆gt;已经有一个悬停在它上面。

.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中调用img标记旁边的a标记，则会出错。

但是，您的HTML表示img div内有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）我在a

下看不到.preview

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/

在div内部悬停时更改图像

5 个答案: