javascript 中的 onmouseover 和 onmouseout 事件

Question

我是 javasript 新手我有一个简单的代码，在 google chroome 中运行良好，但脚本无法在 firefox 中运行这只是关于 onmouseover 和 onmouseout 的两个事件和更改图像

<!DOCTYPE html>
<html>
<head>
    <title> </title>
    <script>

        function over() {
        image1.src = "13.JPG"
              }


        function out() {
        image1.src = "19.JPG"
              }
    </script>

    <style>
        img {
        height:200px; width:200px;
        }
    </style>

</head>
<body>

    <img  id="image1" onmouseover="over()" onmouseout="out()" />

</body>
</html>

它在 google chrome 中运行良好，但在 firefox 中运行良好，我想知道为什么，谢谢。

Answer 1

以下是使用 javascript 执行此操作的方法：

function over() {
        document.getElementById('image1').src = "http://animalrescuetracy.org/wp-content/uploads/2014/07/playful-kitten-6683.jpg";
}


function out() {
        document.getElementById('image1').src  = "http://www.valleyvet.com/images/worming-your-kitten.png";
 }

img {
        height:200px; width:200px;
        }

<img  id="image1" src="" onmouseover="over()" onmouseout="out()"/>

以下是使用 css 的方法：

#image1{
 content:url("http://www.valleyvet.com/images/worming-your-kitten.png");
    height:200px; width:200px;
  
}

#image1:hover{
 content:url("http://animalrescuetracy.org/wp-content/uploads/2014/07/playful-kitten-6683.jpg");
}

 <img  id="image1" src=""/>

javascript 中的 onmouseover 和 onmouseout 事件

onmouseover and onmouseout event in javascript

javascript

javascript-events