JS添加、设置属性以及鼠标移入移出事件
源代码：
<!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添加、设置属性以及鼠标移入移出事件的更多相关文章
- Qt 为QPushButton、QLabel添加鼠标移入移出事件
QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...
- js鼠标移入移出事件会被子元素触发解决方法
问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.
- js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- Vue 鼠标移入移出事件
Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style 现在开始代码示例 <template> <div class="pc&qu ...
- JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...
- Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
- javascript父级鼠标移入移出事件中的子集影响父级的处理方法
一.我们先分析其产生的原因: 1.当鼠标从父级移入子集时触发了父级的两个事件:a.父级的mouseout事件(父级离开到子集):b.由于事件冒泡影响,又触发了父级的mouseover事件(父级移入父级 ...
- 用JQuery给图片添加鼠标移入移出事件
$("#addLineImg").mouseover( function(){ $("#addLineImg").attr("src",&q ...
- jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout
hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...
随机推荐
- mysql提示 Lock wait timeout exceeded解决办法 事务锁死
查询 select concat('KILL ',id,';') from information_schema.processlist; 复制结果 新建sql脚本粘贴并执行
- 文献阅读报告 - Social BiGAT + Cycle GAN
原文文献 Social BiGAT : Kosaraju V, Sadeghian A, Martín-Martín R, et al. Social-BiGAT: Multimodal Trajec ...
- C#:string、stringBuffer、stringBuilder的区别
好脑子不如烂笔头,总是记不住,记下来吧 依然 搬运 地址: http://blog.csdn.net/qq_28187979/article/details/76607253 ------------ ...
- PyPI提供双因素身份验证(2FA)，已提高下载安全性
前天,Python的核心开发团队宣布PyPI现在提供双因素身份验证(2FA),以提高Python包下载的安全性,从而降低未经授权的帐户访问的风险.该团队宣布将在Python Package Index ...
- iptable实现端口转发
利用iptables的规则来实现端口转发: 第一步需要将内核参数的net.ipv4.ip_forward=1 场景一:实现本地端口转发 本地端口转发实在PREROUTING链中将端口做NAT转换: # ...
- idea下maven项目下spring junit 测试用例
使用idea在编写的类下右键Go->Test或者ctrl+shift+t,点击create new test会在相应目录下创建test类 别写代码如下 @RunWith(value = Spri ...
- 018-PHP判断文件是否存在
<?php print("data.txt文件是否存在?" . "<br>"); if (file_exists("data.txt ...
- 第二阶段scrum-7
1.整个团队的任务量: 2.任务看板: 会议照片: 产品状态: 部署云服务器完成,链接数据库完成,消息收发正在制作.
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons)：glyphicon glyphicon-map-marker
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- junit基础学习之-简介（1）
JUnit介绍 JUnit是一个开源的Java单元测试框架,由 Erich Gamma 和 Kent Beck 开发完成. 1 JUnit简介 JUnit主要用来帮助开发人员进行Java的单元测试, ...