悬停时更改图像 Javascript

Question

我进行了研究并研究了很多东西，但是 none 其中的一些对我有用。这是我目前的代码。原图显示正常，但悬停时没有任何反应。

Javascript（在<head>）

<script>
    function onHover()
    {
        $("#news").attr('src', 'img/newsHover.png');
    }

    function offHover()
    {
        $("#news").attr('src', 'img/news.png');
    }
</script>

HTML

<img id="news" onmouseover="onHover();" onmouseout="offHover();" height="100px" width="100px" src="img/news.png"></a>

Answer 1

您的行为可能有充分的理由，但您确定需要使用 JavaScript 吗？

如果您没有做任何花哨的事情，那么使用 CSS 悬停选择器可能会更好：http://www.w3schools.com/cssref/sel_hover.asp

Answer 2

这是一个很简单的例子，不是动画：

HTML:

<img src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png'>

使用jQuery:

$(document).ready(function(){
    $('img').hover(
        function(){$(this).attr("src","https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png")},
        function(){$(this).attr("src","https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png")}
    );
});

Example Not Animation

这是动画示例：

HTML:

<img src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png' class='clean' >
<img src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png' class='exit' >

CSS:

img{
    position:absolute;
    top:0;
    left:0;
}

使用jQuery:

$(document).ready(function(){

    $(".exit").hide();

    $(".clean").hover(function(){
        $(".clean").fadeOut();
        $(".exit").fadeIn();
    });    

    $(".clean").mouseleave(function(){
        $(".exit").fadeOut();
        $(".clean").fadeIn();
    });    

});

Example With Animation

Answer 3

纯java脚本答案，不需要任何外部函数或jquery

<img id="news" onmouseover="this.src='img/newsHover.png'" onmouseout="this.src='img/news.png'" height="100px" width="100px" src="img/news.png">

Answer 4

所以你只能使用这个例子：

<img 
    src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png' 
    onmouseover="this.src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/exit.png'"
    onmouseout="this.src='https://cdn2.iconfinder.com/data/icons/crystalproject/128x128/apps/clean.png'"
    height="100px"
    width="100px"
    id="news"
>

EXAMPLE

悬停时更改图像 Javascript

Change Image On Hover Javascript

html

javascript

jquery

image