源代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			*{

				margin: 0px auto;

			}

			#wk{

				width:100px;

			}

			.pname{

				width: 100px;

				height: 50px;

				line-height: 50px;

				text-align: center;

				background-color: yellow;

				margin: 2px ;

			}

		</style>

	</head>

	<body>

		<div id="wk">

			<div class="pname" onmouseover="ChangeColor(this)"

								onclick="ClickChange(this)"

								onmouseout="KeepColor(this)">

				小花

			</div>

			<div class="pname" onmouseover="ChangeColor(this)"

								onclick="ClickChange(this)"

								onmouseout="KeepColor(this)">

				小白

			</div>

			<div class="pname" onmouseover="ChangeColor(this)"

								onclick="ClickChange(this)"

								onmouseout="KeepColor(this)">

				小明

			</div>

		</div>

	</body>

	<script type="text/javascript">

		//获取要改变样式的元素

		var pname = document.getElementsByClassName("pname");

		//鼠标点击事件，移入变色

		function ClickChange (a) {

			for (var i=0; i<pname.length; i++) {

				//移除属性 a

				pname[i].removeAttribute("a");

				//背景色初始化

				pname[i].style.backgroundColor = "yellow";

			}

			//为变色元素添加属性a

			a.setAttribute("a",1);

			//鼠标移入，改变背景色

			a.style.backgroundColor = "red";

		}

		//鼠标移入事件，点击改变背景色

		function ChangeColor (a) {

			//循环添加背景色

			for (var i=0; i<pname.length; i++) {

				//清样式

				if (pname[i].getAttribute("a")!=1){

					pname[i].style.backgroundColor ="yellow";

				} 

			}

			a.style.backgroundColor = "red";

		}

		//添加鼠标移出事件

		function KeepColor(a) {

			for (var i=0; i<pname.length; i++) {

				//清样式

				if (pname[i].getAttribute("a")!=1)

				{

					pname[i].style.backgroundColor ="yellow";

				} 

			}

		}

	</script>

</html>

　　效果如下：

JS添加、设置属性以及鼠标移入移出事件的更多相关文章

  1. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  2. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  3. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  4. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  5. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  6. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  7. javascript父级鼠标移入移出事件中的子集影响父级的处理方法

    一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...

  8. 用JQuery给图片添加鼠标移入移出事件

    $("#addLineImg").mouseover( function(){ $("#addLineImg").attr("src",&q ...

  9. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

随机推荐

  1. Http与Https协议规范

    HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第 ...

  2. mysql使用的坑

    一: mysql默认是安装记录的物理顺序取数据的,如果不加order by 排序,可能得不到预期的结果. (1) 获取 两个时间点的 id  (很快) $sql = ‘select id from a ...

  3. DevOps - 与敏捷方法区别

    章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...

  4. 标准C的标记化结构初始化语法

    1 struct file_operations { 2         struct module *owner; 3         loff_t (*llseek) (struct file * ...

  5. LeetCode1217 玩筹码（贪心）

    题目: 数轴上放置了一些筹码,每个筹码的位置存在数组 chips 当中. 你可以对 任何筹码 执行下面两种操作之一(不限操作次数,0 次也可以): 将第 i 个筹码向左或者右移动 2 个单位,代价为 ...

  6. C++（五）构造函数

    //构造函数的作用:就是在函数被创建时使用特定的值构造对象,将对象初始化为一个特定的初始状态//例如在构造一个clock类对象的时候,将初始的时间设定为0:0:0//构造函数的名必须与类名相同,不能定 ...

  7. return , return true , return false的区别

    return true:  返回正确的处理结果. return false :  返回错误的处理结果 和 中断代码继续向下 执行. return:    返回null,起到中断方法执行的效果,只要不r ...

  8. tomcat启动报错The JRE could not be found.Edit the server and change the JRE location

    解决: 在Windows->Preferences->Server->Runtime Environments 选择Tomcat->Edit,在jre中选择相应的jdk版本,完 ...

  9. 【WPF学习】第二十四章 基于范围的控件

    WPF提供了三个使用范围概念的控件.这些控件使用在特定最小值和最大值之间的数值.这些控件——ScrollBar.ProgressBar以及Slider——都继承自RangeBase类(该类又继承自Co ...

  10. 计算方法执行完的耗时 c#

    Stopwatch watch = Stopwatch.StartNew(); //要执行的方法 test(); watch.Stop(); Console.WriteLine(string.Form ...