尝试解决悬停图片的问题答案

【问题标题】：Trying to trouble-shoot hovering a picture尝试解决悬停图片的问题
【发布时间】：2023-01-12 19:11:08
【问题描述】：

当我将函数的内容设置为“alert();”时，它会识别我悬停图像的时间。当我实现我想要它做的事情时，将另一个图像悬停在原始图片上。什么都没发生？如果有人能提供一些指导，我将不胜感激。

    <script type="text/javascript">
        function SetNewImage() 
        {
           document.getElementById("thumbnail").src="images/art/thumbs/06010.jpg";
           
        }
        function SetOldImage()
        {
           document.getElementById("thumbnail").src="images/art/thumbs/05030.jpg";
        }
        </script>
</head>
<body>
    <img class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg"  alt="Death of Marat" class="artThumb"/>
    
</body>

【问题讨论】：

标签： javascript html css

【解决方案1】：

你通过 id 使用 document.getElement 但找不到 id

<img id="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg"  alt="Death of Marat" class="artThumb"/>

你可以试试这个 -

<script type="text/javascript">
        function SetNewImage() 
        {
           document.getElementById("thumbnail").src="images/art/thumbs/06010.jpg";
           
        }
        function SetOldImage()
        {
           document.getElementById("thumbnail").src="images/art/thumbs/05030.jpg";
        }
</script>
</head>
<body>
    <img class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="images/art/thumbs/05030.jpg"  alt="Death of Marat" class="artThumb"/>
    
</body>

【讨论】：

【解决方案2】：

thumbnail 是一个类，所以你可以做类似的事情

    <script type="text/javascript">
        function SetNewImage() 
        {
           document.querySelector(".thumbnail").src="https://i.ytimg.com/vi/XCpHNOAzLqA/maxresdefault.jpg";
           
        }
        function SetOldImage()
        {
           document.querySelector(".thumbnail").src="https://th.bing.com/th/id/R.31a5d99ff4d1fac186599a7decd1cf85?rik=SpU2aqLepkVuuA&riu=http%3a%2f%2fwww.hickerphoto.com%2fimages%2f1024%2fpictures-f76t7426.jpg&ehk=SWYUsFxxPWF2LYjSRna6Yfukj3Ng60iCBzZ%2b%2buDP7g8%3d&risl=&pid=ImgRaw&r=0";
        }
        </script>
    <img class="thumbnail" onmouseover="SetNewImage()" onmouseout="SetOldImage()" src="https://th.bing.com/th/id/R.31a5d99ff4d1fac186599a7decd1cf85?rik=SpU2aqLepkVuuA&riu=http%3a%2f%2fwww.hickerphoto.com%2fimages%2f1024%2fpictures-f76t7426.jpg&ehk=SWYUsFxxPWF2LYjSRna6Yfukj3Ng60iCBzZ%2b%2buDP7g8%3d&risl=&pid=ImgRaw&r=0"  alt="Death of Marat" class="artThumb"/>

【讨论】：

【解决方案3】：

使用this.src=imgUrl变量来解决你的问题

【讨论】：

【解决方案4】：

尝试修改class为id，img中的Class和JS中的getelementbyid

【讨论】：