源代码：

<!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. Redis详解（三）——事务

    Redis详解(三)--事务 Redis事务的概念: Redis 事务的本质是一组命令的集合.事务支持一次执行多个命令,一个事务中所有命令都会被序列化.在事务执行过程,会按照顺序串行化执行队列中的命令 ...

  2. 《高性能MySQL》之EXPLAIN

    使用explain关键字获取sql执行性能 语法如下: explain select * from table explain 中的列expain出来的信息有10列,分别是id,select_type ...

  3. 基于Ambari的WebUI实现集群扩容案例

    基于Ambari的WebUI实现集群扩容案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.将HDP的服务托管给Ambari服务 1>.点击“Service Auto S ...

  4. web.xml中的classpath是啥

    在web.xml中一个很面熟的字:classpath,它到底是个啥? <servlet> <servlet-name>dispatcherServlet</servlet ...

  5. 118-PHP调用带参数的成员方法

    <?php class ren{ //定义人类 public function info($name,$age=3){ //定义有两个参数的成员方法 echo "我是{$name},年 ...

  6. 067-PHP使用匿名函数

    <?php $func=function ($x,$y){ //匿名函数与变量绑定 return $x+$y; }; echo '5+6='.$func(5,6); //使用匿名函数 echo ...

  7. 吴裕雄--天生自然C++语言学习笔记：C++ 异常处理

    异常是程序在执行期间产生的问题.C++ 异常是指在程序运行时发生的特殊情况,比如尝试除以零的操作. 异常提供了一种转移程序控制权的方式.C++ 异常处理涉及到三个关键字:try.catch.throw ...

  8. Mysql升级、免安装版MYSQL安装与卸载

    1.         备份好数据库:表结构和数据: 2.         备份my.ini文件和data文件夹: 3.         卸载旧版本mysql: 4.         安装新版本mysq ...

  9. 第十八篇 admin组件

    admin组件 admin组件使用 admin源码解析 admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以 ...

  10. vue学习（十一）vue-cli3开发单文件组件

    一 单文件组件介绍 二 如何安装Vue-Cli3脚手架 三 快速原型开发 四 vue-cli3生成项目 五 购物车项目搭建 六 购物车项目操作 七 Mock模拟数据 八 Vue中使用第三方组件(ele ...