鼠标悬停效果

唥颜

于 2017-09-26 16:32:55 发布

阅读量579

点赞数

分类专栏： html/css 文章标签：鼠标

本文链接：https://blog.youkuaiyun.com/qq_40351096/article/details/78101539

版权

html/css 专栏收录该内容

3 篇文章

订阅专栏

本文探讨如何在网页设计中实现鼠标悬停及点击时的交互效果，包括元素高亮、下拉菜单等常见功能，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标悬停，点击效果

这里写图片描述


<!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>