Question

嘿伙计我是新来的，我想在我的网站上做点什么，我有一个div，我希望当人们用鼠标悬停它时，它会将图像更改为另一个图像。我找到了这个http://jsfiddle.net/EXNZr/1/，但它只在我悬停图像时才有效，当我悬停div时如何更改？提前致谢，对不起英语打扰

<div id="content"><img id="changeonhover" src="../test/images/yes.png"></div>

这是我的代码，我希望当人们将鼠标悬停在“内容”上时，“changeonhover”中的图像会变为no.gif，例如

Answer 1

试试这个：http://jsfiddle.net/Ry8E4/

$(document).ready(function()
{
    $("#theDiv").hover(
        function()
        {
            $("#imgDino").attr("src", "http://www.sitevip.net/gifs/dinosaur/2348_animado.gif");
        },
        function()
        {
            $("#imgDino").attr("src", "http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870");
        }                         
    );                  
});

Answer 2

http://jsfiddle.net/EXNZr/54/

您只需将悬停事件处理程序应用于父div并使用.find（）更改图像标记的src;

参考文献：

http://api.jquery.com/find/

Answer 3

$(document).ready(function() {
    $("#content").hover(
        function()
        {
            $('#changeonhover', this).attr("src", "http://www.sitevip.net/gifs/dinosaur/2348_animado.gif");
        },
        function()
        {
            $('#changeonhover', this).attr("src", "http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870");
        }                         
    );                  
});

在#content上拨打活动，而不是#changehover。

Answer 4

如果您使用背景图片将<img>标记更改为<div>

，请务必告诉您这可以完全使用CSS完成

如何使用javascript在悬停时更改图像

4 个答案: