css 试图排除悬停在图片上的故障

tag5nh1u 于 2023-01-14 发布在其他

关注(0)|答案(3)|浏览(102)

当我将函数的内容设置为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>

css

来源：https://stackoverflow.com/questions/72053776/trying-to-trouble-shoot-hovering-a-picture

3条答案

按热度按时间

toiithl61#

您按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>

赞(0）回复(0）举报 2023-01-14

jucafojl2#

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"/>

赞(0）回复(0）举报 2023-01-14

j8ag8udp3#

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

赞(0）回复(0）举报 2023-01-14