js鼠标移入改变颜色，移除还原

最新推荐文章于 2023-08-26 11:05:53 发布
最新推荐文章于 2023-08-26 11:05:53 发布
阅读量5.1k 收藏 7
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lyonahah/article/details/121221234
版权

CSS JavaScript 悬停效果 样式 事件处理
关键词由CSDN通过智能技术生成 
<style type="text/css">
			.cd{
				width: 200px;
				height: 20px;
				border: solid 1px black;
				text-align: center;
				float: left;
				margin: 5px;
			    }
		</style>
	</head>
	<body>
		<div class="cd">
			菜单一
		</div>
		<div class="cd">
			菜单二
		</div>
		<div class="cd">
			菜单三
		</div>
		<div class="cd">
			菜单四
		</div>
		<div class="cd">
			菜单五
		</div>
	</body>
	<script type="text/javascript">
		var yj=document.getElementsByClassName('cd');
		for(var i=0;i<yj.length;i++){
			yj[i].onmouseover=function(){
			//console.log(i)
			this.style.backgroundColor="red"	
		}
		yj[i].onmouseout=function(){
			this.style.backgroundColor="";
		}
		}
	</script>

Lyonahah
关注
[知识图谱实战篇] 五.HTML+D3添加鼠标响应事件显示相关节点及边
杨秀璋的专栏
02-12 8872
前文介绍了Python3抓取电影实体知识，Seaborn可视化展示电影信息，D3可视化布局，关系图谱基本构建。本篇文章将实现如下图所示的功能，主要包括：1.建立两种模式，点击“节点”显示所有圆，点击“文字”显示实体名称 2.添加鼠标响应事件，选中某一个节点显示其相关的节点及边 3.鼠标放开恢复所有节点
DOM表格 简单购物车、表格隔行变色、表格行颜色随鼠标移动变色
Birdlun的博客
07-06 452
目录 DOM访问表格元素 常用属性和方法 rows[index]返回表格指定的行为对应属性 cells[index]返回表格指定的列所对应的属性 表格的增删改查 表格添加删除常用方法 表格行添加删除方法 列：实现购物车 列：设置表格颜色并实现隔行变色 DOM访问表格元素 常用属性和方法 caption 返回表格的标题对象 rows 返回该表格里的所有表格行 tbo...
JS-隔行换色+鼠标移上去变色
weixin_45959965的博客
12-17 839
JS-隔行换色+鼠标移上去变色
js 实现 鼠标移入移出时颜色变化
03-31
js 实现 鼠标移入移出时颜色变化! 值得下载看看!资源免费,大家分享!!
【HTML】js控制代码，鼠标移入移除改变颜色
qq_51237779的博客
11-08 1870
【HTML】js控制代码，鼠标移入移除改变颜色
利用js实现鼠标移动到目标行进行颜色调整
最新发布
a000515的博客
08-26 1257
【代码】利用js实现鼠标移动到目标行进行颜色调整。
如何实现鼠标移入变色，移出还原
09-25
该代码可以实现表格中鼠标在不同行间移动来实现输鼠标移入移出 有颜色提醒的效果
JS实现鼠标移入DIV随机变换颜色
林恒的博客
11-30 772
今天分享一个在 JavaScript中，实现一个鼠标移入可以随机变换颜色，本质就是js的随机数运用。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 这里定义一...
鼠标移入/移出改变样式
weixin_44580139的博客
10-29 2143
鼠标移入/移出改变样式 实现效果： 当鼠标移入时要改变div的边框颜色、背景色、p的字体颜色以及鼠标样式；鼠标移出则还原。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/cs...
three.js中的事件
01-16 1004
以上一篇入门篇为例来简单的设置下3d模型当中的交互事件，上一篇我们已经完成了在3d页面中添加了一个红色球，下面我们给这个球一个点击事件让它Y轴位置上升，再设置一个鼠标移入到球上时让其变色。 1.其实three.js当中没有事件可以直接选中物体的，我们需要监听window对象来完成与3d页面的交互，通过使用到three.js当中RayCaster对象，用于在三维空间中进行鼠标拾取，原理是：相机与鼠...
JavaScript笔记
shine_my的博客
03-13 3410
JavaScript笔记
js鼠标单击改变行的颜色
MaWenWu专栏
11-08 1221
 <!--var color="";var uid = 0; function Color(obj){ obj.style.backgroundColor="#CDDEE7"; uid = obj.title; if(!(color==""||color==obj.id)){ document.getElementById(color).style.backg
表格隔行变色效果_js鼠标移入移出
weixin_46323591的博客
05-20 294
表格隔行变色效果_js鼠标移入移出 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table {
用js实现鼠标移出移进变换颜色
热门推荐
feilong_12的专栏
02-28 1万+
function a(){ var red=document.getElementById('div1'); red.style.backgroundColor="blue"; } function b(){ var red=document.getElementById('div1'); red.style.backgroundColor="red"; }
用JavaScript实现鼠标经过一行变色的功能
weixin_30314793的博客
10-24 631
有些时候鼠标移动到一些地方，该地方会相应的做出一些变化。我们在CSS中可以使用hover来实现鼠标事件，但这仅限于鼠标移动到此元素上，元素做出的相应反应。与CSS不同的是，JavaScript为我们提供了一系列的鼠标监听事件。此案例将模拟鼠标经过表格一行时的变色功能。 代码如下 <!DOCTYPE html> <html> <head> <me...
JavaScript鼠标移动变色
PPAP__的博客
07-16 658
鼠标移动变色 var trs = document.getElementsByTagName("tr"); //遍历所有tr，给所有tr绑定事件 for (var i = 0; i < trs.length; i++) { trs[i].onmouseover = function () { this.style.backgroundColor = "gray"; }
JS实现li各行变色，且在各行变色基础上实现鼠标移入变色，移除变为原来的颜色
GrowingRick的博客
02-15 2782
1、JS实现隔行变色 <body> <ul> <li>aaaaaa</li> <li>bbbbbb</li> <li>cccccc</li> <li>ddddddd</li> <li&g...
javaScript点击鼠标改变背景颜色
heikerx的博客
08-16 3586
<script> function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } document.addEventListener('click',function(e){ //console.log(e.clientX); //console.log(e.clientY); c
JS 移过li变色
qq_35699549的博客
04-24 170
JS li变色 <script> var list = document.getElementsByTagName("li"); for(var i=0;i<list.length;i++){ // list[i].index=i; list[i].onmouseover = function(){ this.style.color='red';
vue 鼠标移入移除改变颜色
05-28
可以使用Vue的指令来实现鼠标移入移除改变颜色的效果。 首先，在模板中定义需要改变颜色的元素，使用v-bind绑定一个变量来表示颜色，例如： ``` <template> <div> <span v-bind:style="{ color: textColor }" v-on:mouseover="changeColor('red')" v-on:mouseout="changeColor('black')">鼠标移入移除改变颜色</span> </div> </template> ``` 上面的代码中，使用v-bind绑定了一个变量textColor来表示颜色，使用v-on绑定了鼠标移入和移出事件，分别调用了changeColor方法来改变textColor的值。 接下来，在Vue实例中定义textColor和changeColor方法，例如： ``` <script> export default { data() { return { textColor: 'black' } }, methods: { changeColor(color) { this.textColor = color; } } } </script> ``` 上面的代码中，定义了一个data属性textColor来表示颜色，初始值为黑色。同时，定义了一个changeColor方法，接收一个颜色参数，用于改变textColor的值。 这样，当鼠标移入元素时，调用changeColor方法改变textColor的值为红色，元素的颜色也随之改变；当鼠标移出元素时，调用changeColor方法改变textColor的值为黑色，元素的颜色也随之改变。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值