首页 > 其他分享 >前端03

前端03

时间:2023-07-24 23:01:58浏览次数:31  
标签:03 鼠标 示例 移出 前端 移入 按钮 button

1、JS可以控制web前端的哪两个?


html 和 css

2、写一个普通按钮,使用js设置鼠标移入的时候,弹出“鼠标移入”;


<!DOCTYPE html>

<html>

<head>

 <title>按钮示例</title>

 <style>

   .my-button {

     padding: 10px 20px;

     background-color: #eaeaea;

     border: none;

     cursor: pointer;

   }

 </style>

</head>

<body>

 <button class="my-button">普通按钮</button>


 <script>

   const button = document.querySelector('.my-button');


   button.addEventListener('mouseover', function() {

     alert('鼠标移入');

   });

 </script>

</body>

</html>

3、写一个提交按钮,使用js设置鼠标移出的时候,弹出“鼠标移出”;

 <!DOCTYPE html>

<html>

<head>

 <title>提交按钮示例</title>

 <style>

   .submit-button {

     padding: 10px 20px;

     background-color: #eaeaea;

     border: none;

     cursor: pointer;

   }

 </style>

</head>

<body>

 <button class="submit-button">提交按钮</button>


 <script>

   const button = document.querySelector('.submit-button');


   button.addEventListener('mouseout', function() {

     alert('鼠标移出');

   });

 </script>

</body>

</html>

标签:03,鼠标,示例,移出,前端,移入,按钮,button
From: https://blog.51cto.com/u_16120675/6840797

相关文章

  • 前端基础之BOM和DOM
    window对象常用方法●window.innerHeight-浏览器窗口的内部高度●window.innerWidth-浏览器窗口的内部宽度●window.open()-打开新窗口●window.close()-关闭当前窗口navigator对象navigator.appName//Web浏览器全称navigator.appVersion//Web浏览......
  • CF506E Mr. Kitayuta's Gift 思考--zhengjun
    妙妙题。首先可以有一个\(O(kn^2)\)的dp,但是显然不行。但是,发现其中的大多数转移都浪费在自环上了,所以考虑不要这个东西。这个dp一共有三种转移:左右端点一起向内移动一格;左端点或右端点单独移动;左右端点都不动。所以考虑加一维\(k\)表示走了\(k\)次转移1......
  • 【题解】Ntarsis' Set - Codeforces 1852A
    出处:CodeforcesRound887链接:https://codeforces.com/problemset/problem/1852/A题目大意:给定一个包含\(n\)个正整数的表示删除位置的严格升序序列\(p\),以及另外一个连续正整数的被删除的无穷序列\(l\)。进行\(k\)次删除操作,每次操作从无穷序列\(l\)中同时删除位......
  • 前端请求报错:'JSON parse error: syntax error, expect {, actual e…1, line 1, colu
    1、如果不用JSON.stringify(inputJson)包起来就会报错letinputJson={"selectUid":selectUid};varresponse=await$.ajax({type:'POST',url:'xxx',data:inputJson,//正确的是JSON.stringify(inputJson)......
  • 前端文件下载方法封装
    1exportconstdownloadFileAxios=(fileUrl)=>{2axios({3url:fileUrl,4method:'GET',5responseType:'blob',6}).then((response)=>{7constcontentDisposition=respon......
  • 前端拿到后端返回文件流后页面生成excel表格预览(Luckysheet)
    最近项目遇到一个需求,就是本来只需要导出的excel文件,客户要求在前端页面进行预览查看。在查找资料后,决定使用Luckysheet来进行excel文件的预览。1.安装npmiluckyexcel2.html中引入相关js,css文件,可以自己下下来放到本地引入<linkrel='stylesheet'href='https://cdn.......
  • 前端系列16集-vue3范型,vue-i18n-next,watch,watchEffect
    中台落地手记——业务服务化与数据资产化vue-i18n-nextvue3中使用i18n需要安装的是 [vue-i18nv9] 的版本npminstallvue-i18n@9创建src\lang\index.ts,使用 createI18n 创建i18n实例://src\lang\index.tsimport{createI18n}from'vue-i18n'import{LANG_......
  • Navicat连接Mysql出现“plugin 'caching_sha_password' cannot be loaded”错误
    Navicat连接Mysql出现“plugin'caching_sha_password'cannotbeloaded”错误问题现场​​**官方说明:**​https://dev.mysql.com/doc/refman/8.0/en/caching-sha2-pluggable-authentication.html解决方案使用本地mysql命令行登录;mysql-uroot-p先查一下看看--使用......
  • Vue项目启动 报错error:0308010C:digital envelope routines::unsupported
    出现这个错误是因为node.jsV17版本中最近发布的OpenSSL3.0,而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响.解决方法package.json增加配置"scripts":{"serve":"setNODE_OPTIONS=--openssl-legacy-provider&&vue-cli-serviceserve......
  • idea解析sql语句报错:Unable to resolve column 'uname'
    1.如题2.解决办法......