[前端] js鼠标停留事件

article/2025/9/5 15:42:18

        在写某个网页作业时,要用到这个基本技能,就是鼠标放到某一选项上变个色,移开后又变回来。

        这个在网页中很常见,实现也很简单,写一个小的例子,放在这里方便以后作为模板用。

                

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html lang="zh-CN">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>js控件停留事件</title>  <link href="../css/my.css" rel="stylesheet">  
<script type="text/javascript">  window.onload = function(){  var arr = document.getElementsByName('mytype');  for(var i = 0;i<arr.length;i++){  arr[i].onmouseover = function(){this.className = 'td1';}arr[i].onmouseout = function(){this.className = 'td2';} }  }  
</script>  
<body>  <div id="main" style="margin:auto 0">  <div style="margin-top:2em;" align="center">  <div name = "mytype" class = "td2">控件一</div>  <div name = "mytype" class = "td2">控件二</div>  <div name = "mytype" class = "td2">控件三</div>  <div name = "mytype" class = "td2">控件四</div>  </div>  </div> </body>  </html>  



        在css文件夹中的my.css

.td1{background-color:#666666;height:50px;
}.td2{background-color:#ffffff;height:50px;
}



http://chatgpt.dhexx.cn/article/IYor5Rcb.shtml

相关文章

jquery的鼠标悬停与移出事件

需求&#xff1a; 实现鼠标悬停在div标签时&#xff0c;背景变为蓝色&#xff0c;字体变红变大&#xff0c;鼠标离开后 背景变白&#xff0c;字体变小 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta nam…

JavaScript事件 鼠标事件

JavaScript事件&#xff0c;事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。 JavaScript 与 HTML 之间的交互是通过事件实现的。对于 Web 应用来说&#xff0c;有下面这些代 表性的事件&#xff1a;单击事件、鼠标移入移出事件、键盘按下/弹起事件等等。 鼠标事件&…

JavaScript 鼠标移动事件

今天我要分享的JavaScript鼠标移动事件的知识点 1.首先准备一个文件夹和一张GIF的动图&#xff0c;打开VS Code&#xff0c;新建一个文件,CtrlS保存文件&#xff0c;输入文件名&#xff0c;文本类型设置成HTML&#xff0c;如下图所示&#xff1b; 2.在文档里输入英文状态下的感…

js 鼠标按下并移动事件

html源码&#xff1a; <divonMouseDown{(e) >fn1(e)}onMouseUp{(e)>fn2(e)}>内容</div> js源码 fn1(event) > { //鼠标按下事件console.log(onMouseDown, event); //鼠标按下时移动鼠标事件&#xff08;鼠标未抬起&#xff09;document.onmousemove fun…

JS小技巧:鼠标悬停事件

简单的JS悬停图片变换 不多bb先看效果图 可以看到鼠标悬停在不同的标题上时&#xff0c;下方的图片会产生相应变换 代码如下 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><style>* {margin: 0;p…

js鼠标事件

通过鼠标触发事件, 类似用户的行为: 属性 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 onmousedown 当按下鼠标按钮时运行脚本 onmousemove 当鼠标指针移动时运行脚本 onmouseout 当鼠标指针移出元素时运行脚本 onmouseover 当鼠标指针移…

用js给div添加鼠标悬停事件

新任务:给表格上的某列添加鼠标悬浮事件 但是表格是由omGrid生成的,无法修改 所以只能先获取,再添加事件 先用firebug看清表格结构:\ 是div class"innerCo1 " class还是有空格的,为此还纠结了下.. js代码: var obj document.getElementsByTagName("div&quo…

JavaScript的DOM之鼠标悬浮事件

JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理&#xff1a; 就是当鼠标在这块区域时候会触发相应事件&#xff0c;将鼠标挪开则恢复原先事件 附上代码 <!DOCTYPE html> <html lang"en"> <…

如何调试JS中鼠标悬停事件影响的元素?

如何调试JS中鼠标悬停事件影响的元素&#xff1f; 在日常的前端开发中&#xff0c;我们经常要调试许多其他开发者写的网站和代码。此时我们往往会打开浏览器的开发者工具&#xff0c;在 Elements,Console,Network,Sources,Performance 等多个 Tab 之间来回穿梭。 今天笔者来分…

js实现鼠标悬停事件

介绍&#xff1a;把鼠标放在选择框上实现文字浮现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>第一个JS</title><style>#div1 {width: 100px;height: 100px;background-color: red;b…

宜搭低代码与Faas构建数据看板

写在前面 数字化办公兴起&#xff0c;企业改变办公方式迫在眉睫&#xff0c;低代码是一个发展方向 目录 写在前面 环境及目的 表单&连接器&Faas 表单 连接器&Faas Faas 连接器配置 结语 环境及目的 平台&#xff1a;钉钉宜搭低代码 Faas:nodejs v12.20.0 …

faas函数使用

faas-cli 是一款 OpenFaaS 官方工具&#xff0c;在faas项目中使用频繁&#xff0c;作为与API GateWay沟通的桥梁工具&#xff0c;相当重要。它用于创建、部署OpenFaas函数应用 &#xff0c;支持从多种语言模板构建 (例如 Node.js, Python, CSharp and Ruby).&#xff0c;在实际…

Nodejs也能Serverless?从0开始用Nodejs打造一个FaaS服务

本篇文章并不是教你怎么用阿里云、谷歌云等等云框架的FaaS服务&#xff0c;而是教你如何从0开始打造一个自己的FaaS服务。 受限于人力及成本原因&#xff0c;现在的FaaS服务基本上可以说是“大厂玩物”&#xff0c;而网上鲜有相关代码的实现&#xff0c;因此我才打算写一篇文章…

OpenFaaS介绍

FaaS 云计算时代出现了大量XaaS形式的概念&#xff0c;从IaaS(Infrastructure as a Service)、PaaS(Platform as a Service)、SaaS(Software as a Service)到容器云引领的CaaS(Containers as a Service)&#xff0c;再到火热的微服务架构&#xff0c;它们都在试着将各种软、硬…

深入理解无服务器架构(Faas/Serverless)

摘要 无服务器架构(Faas/Serverless)&#xff0c;是软件架构领域的热门话题。 AWS&#xff0c;Google Cloud和Azure - 在无服务器上投入了大量资金&#xff0c;已经在看到了大量专门针对Faas/Serverless的文章、书籍&#xff0c;开源项目&#xff0c;会议。 但什么是无服务器&…

PaaS、IaaS 、SaaS、Bass、Fass、无服务的理解与区别

云计算&#xff08;cloud computing&#xff09; 关于云计算的定义有多种说法&#xff0c;现阶段广为接受的是美国国家标准与技术研究院&#xff08;NIST&#xff09;定义&#xff1a;云计算是一种按使用量付费的模式&#xff0c;这种模式提供可用的、便捷的、按需的网络访问&…

云计算服务类型都是什么?IaaS、PaaS、SaaS、BaaS、FaaS

云计算服务类型都是什么&#xff1f;IaaS、PaaS、SaaS、BaaS、FaaS 基本概念 云计算主要分为 4 种类型&#xff1a;私有云、公共云、混合云和多云。 同时&#xff0c;云计算服务主要有 3 种&#xff1a;基础架构即服务&#xff08;IaaS&#xff09;、平台即服务&#xff08;P…

简单介绍一下Serverless和Faas

一、啥叫Serverless(无服务器) Like many trends in software, there’s no one clear view of what Serverless is. For starters, it encompasses two different but overlapping areas: (就是一般定义为两种不同但交叉的领域&#xff1a;Faas和Baas) Serverless was first…

Faas

文章介绍了Faas是什么&#xff0c;FaaS的特点、以及它的好处&#xff0c;和基于Kubernetes的FaaS框架Fission等&#xff0c;希望能对您有所帮助。 前言 云计算时代出现了大量XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,再到火热的微服务架构,以及现在越来越多被谈…

XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,Serverless和FaaS 概念

XaaS IaaS、PaaS、SaaS CaaS&#xff0c;Serverless 和FaaS 和lambda 前言 云计算时代出现了大量XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,再到火热的微服务架构,以及现在越来越多被谈起的Serverless和FaaS,我们正在经历?一个技术飞速变革的时代。 一、什么是…