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

How to change image on hover with javascript

本文关键字：图像 悬停 何使用 javascript      更新时间：2024-05-06

嘿，伙计们，我是新来的，我想在我的网站上做点什么，我有一个div，我希望当人们用鼠标悬停它时，它会将其中的图像更改为另一个图像。我发现了这个http://jsfiddle.net/EXNZr/1/但它只有在我悬停图像时才起作用，当我悬停div时，我如何使它发生变化？提前感谢并对损坏的英语表示歉意

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

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

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

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

参考文献：

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

如果您使用背景图像将<img>标记更改为<div>，则不得不告诉您这可以完全使用CSS来完成

试试这个：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");
        }                         
    );                  
});​

$(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上的事件。

相关文章：