源代码：

<!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. 将xml字符串的所有叶标签转换成Map集合

    实际问题:对方服务器接口采用webservice方式返回xml报文,现需解析xml获取所有叶节点的标签名及携带的值 解决方案:利用dom4j解析xml并利用递归获取叶节点,将标签名及标签值封装到Map ...

  2. RPC_E_SERVERFAULT excel com操作错误

    遇到多次了,以管理员身份启动excel,禁用第三方加载项,解决. 我遇到几次都是 foxit pdf reader导致的.

  3. SQL——左连接（Left join）右连接（Right join）内连接（Inner join）

    概念(定义) ​首先还是介绍一下这三个的定义 ​Left join:即左连接,是以左表为基础,根据ON后给出的两表的条件将两表连接起来.结果会将左表所有的查询信息列出,而右表只列出ON后条件与左表满足 ...

  4. 深度学习之常用linux命令总结

    深度学习中常用linux命令总结 1.创建文件夹 mkdir 文件名2.删除文件 rm -d 目录名 #删除一个空目录 rmdir 目录名 #删除一个空目录 rm -r 目录名 #删除一个非空目录 r ...

  5. 2020牛客寒假算法基础集训营4 I 匹配星星

    https://ac.nowcoder.com/acm/contest/3005/I 又做麻烦了,悲催... 将所有星星按x坐标为第一关键字,z为第二关键字排好序 那么一个z=1的星星匹配的是x比它小 ...

  6. NO5 grep-head-tail命令

    ·*****grep:#过滤需要的内容(linux三剑客).                   -v:排除内容.eg:grep -v oldboy test.txt ·head: #头,头部.读取文 ...

  7. 中兴将用“加减乘除”建立理想 5G 网络

      6 月 28 日,MWC 2019 上海展期间,中兴通讯执行董事.总裁徐子阳发表演讲表示,面对 5G 建网大势,要看破大势,不破不立.为此中兴将用“加减乘除”建立理想 5G 网络. 何为“加减乘除 ...

  8. HihoCoder第十一周：树中的最长路

    #1050 : 树中的最长路 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到,小Ho得到了一棵二叉树玩具,这个玩具是由小球和木棍连接起来的,而在拆拼它的过程中, ...

  9. GNS3 模拟Arp命令1

    R1 : conf t int f0/0 no shutdown ip add 192.168.1.1 255.255.255.0 end R2: conf t int f0/0 no shutdow ...

  10. Django ORM中常用的字段类型以及参数配置

    一.数值型 AutoField对应int(11).自增主键,Django Model默认提供,可以被重写. BooleanField对应tinyint(1).布尔类型字段,一般用于记录状态标记. De ...