示例 鼠标悬停修改图片的内容

时间：2023-02-09 15:54:27


代码


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>

<button >狗1</button>
<button >狗2</button>
<div class="box">
    <img  style="width: 200px;" src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF" alt="">
</div>
<script>

    var b1 = document.querySelector("#y")
    var b2 = document.querySelector("#b")

    var dog = document.querySelector("#dog")


    b1.onmouseenter = function () {
        dog.src = "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF"
    }
    b2.onmouseenter = function () {
        dog.src = "https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF"
    }

</script>

</body>
</html>
标签：

相关文章