源代码：

<!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. 洛谷 P4391 [BOI2009]Radio Transmission 无线传输

    题目传送门 解题思路: 本题所要求的循环节,其实就是最长公共前缀的前缀长度减去前后缀重叠的一部分 AC代码: #include<iostream> #include<cstdio&g ...

  2. R 《回归分析与线性统计模型》page140，5.1

    rm(list = ls()) library(car) library(MASS) library(openxlsx) A = read.xlsx("data140.xlsx") ...

  3. tp5日志分表

    /** * 记录网站日志 * * @return bool */ public function record() { // 组装数据 $log = self::$param; $log[self:: ...

  4. 利用jQuery实现PC端href生效，移动端href失效

    今天要写一个功能,记录一下吧.if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){ $('.item-a').attr('href' ...

  5. Codeforces Round #619 (Div. 2)

    A. Three Strings 题意:给三个长度相同的非空字符串abc,依次将c中的每个字符和a或者b中对应位置的字符进行交换,交换必须进行,问能否使得ab相同. 思路:对于每一个位置,如果三个字符 ...

  6. 动手实验01-----vCenter 微软AD认证配置与用户授权

    环境说明: AD域->   centaline.net 阅读目录: 1. 配置与AD认证源 2.权限角色 1. 配置与AD认证源 登陆vCenter后,在 系统管理 -> 配置 -> ...

  7. windows中git输错密码后不能修改问题

    坑位 当使用git做代码管理的时候,如果仓库地址地选用的是https,在初始拉取代码时,需要输入账号和密码,如果不小心输错了,后续一直会验证失败,无法再重新更正账号信息 Why 因为git为了不让你每 ...

  8. 066-PHP通过函数名调用函数

    <?php function hello(){ //定义函数 echo '<br />Hello!<br />'; } function hellophp(){ //定义 ...

  9. bmp

    function GetNumberBuffer(cZi: string; cwidth, cheight: Integer; FontName: string; bold, italic: Bool ...

  10. vue的computed和method的区别

    (1)computed是响应式的,methods并非响应式. (2)computed是带缓存的 (3)computed中的成员可以只定义一个函数作为只读属性,也可以定义get/set变成可读写属性,这 ...