源代码：

<!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. 【pwnable.kr】 [simple login]

    Download : http://pwnable.kr/bin/login Running at : nc pwnable.kr 9003 先看看ida里面的逻辑. 比较重要的信息时input变量再 ...

  2. 洛谷P1000 超级玛丽游戏（洛谷新手村1-1-1）

    题目背景 本题是洛谷的试机题目,可以帮助了解洛谷的使用. 建议完成本题目后继续尝试P1001.P1008. 题目描述 超级玛丽是一个非常经典的游戏.请你用字符画的形式输出超级玛丽中的一个场景. *** ...

  3. C++ 非白名单程序间接启动

    主要的思路是不能用不受信任的程序直接参与创建进程,而是间接启动目标进程.比如你可以把目标程序创建快捷方式,然后设置快捷键.然后向桌面发快捷键的按键消息,目标程序就会被桌面程序启动.

  4. 01-JAVA语言基础——课程作业1—编写一个程序，此程序从命令行接收多个数字，求和之后输出结果。

    1.题目:编写一个程序,此程序从命令行接收多个数字,求和之后输出结果. 2.程序设计思想: 通过运行配置输入数字后,其保存类型为String类型,因此需要采用Integer.valueOf(arg)将 ...

  5. IPv6-isis配置

    ①:ipv6 unicast-routing——开启IPv6路由功能 ②:router isis word——开启ISIS进程 ③:is-type——可以修改路由器ISIS等级 ④:进入接口 ⑤:启用 ...

  6. 75.Python中ORM聚合函数详解：Sum

    Sum:某个字段的总和. 1. 求图书的销售总额,示例代码如下: from django.http import HttpResponse from django.db import connecti ...

  7. 新手学Java，有哪些入门知识点？

    很多小伙伴们在刚接触Java的时候,会有些迷茫,不知道该从哪里入手,不管是做前端还是后端,程序员都会用到JAVA,那该掌握哪些必要的基础知识呢.今天就跟大家分享新手学Java,有哪些入门知识点? 下面 ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-volume-down

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  9. java IO 流关系图谱

    学习io流最好明白其之间的 关联与转换关系 ,以下是笔者所划得 关系图谱,大框包含小框 ,小框是大框内的 请求参数,箭头是继承或实现. 清晰了其关联与包含关系后我们便很容易在现实中结合使用了 . 这是 ...

  10. PHP操作MYSQL数据库（10.11 第十九天）

    一.连接及断开数据库 1.使用mysqli 扩展(推荐),只针对mysql数据库 面向对象的方式 $con = new mysqli(ip,user,password); if($con->co ...