在线代码编辑器
  • 复制代码
  • 下载代码
  • 清除缓存
  • 缓存代码
  • 运行
    • <!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>修改代码，点击运行显示结果</title>
        <!--适应移动端-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--css样式-->
        <style>
        body{background-color: #EBEBEB}
        .aaa{background-color: #CB4F51;padding: 10px;display: block}
        </style>
        <!--引用jquery库-->
        <script src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
    </head>

    <body>
        <h3>这是一个简单的点击效果</h3>
        <div class="aaa">
            点击我
        </div>

        <script type="text/javascript">
            $(document).ready(function(){
                //点击
                $(".aaa").click(function(){
                    alert("你好！");
                });
                //悬停到目标上
                $(".aaa").mouseover(function(){
                    $(this).css("background-color","#0060ff");
                });
                //悬停离开
                $(".aaa").mouseout(function(){
                    $(this).css("background-color","#CB4F51");
                });
            });
        </script>

    </body>
</html>