鼠标悬停效果

来源：互联网发布：安徽南瑞继远知乎编辑：程序博客网时间：2024/05/18 14:15

鼠标悬停，点击效果

这里写图片描述

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            button{                border: 0;            }            img{                margin: 50%;            }        </style>        <script>            function changeColor( str){                document.getElementById("color").style.backgroundColor=str;            }            //笑            function myOver(){                document.getElementById("tp").src="img/haha.gif";            }            //哭            function myOut(){                document.getElementById("tp").src="img/cry.jpg";            }        </script>    </head>    <body id="color">        <button onclick="changeColor('pink')">粉色</button>        <button onclick="changeColor('orange')">橙色</button>        <button onclick="changeColor('grey')">灰色</button>        <button onclick="changeColor('lightgreen')">豆绿色</button>        <div  onmouseover="myOver()" onmouseout="myOut()" style="float: left;">            <img id="tp" src="img/cry.jpg" />        </div>    </body></html>

阅读全文

0 0