js选中变色，不选中鼠标放上变色
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
margin:0px auto;
padding:0px;
}
#da{
width:100%;
height:280px;
}
.xiao{
width:100px;
height:20px;
background-color:#00F;
border:1px solid #FFF;
text-align:center;
line-height:20px;
vertical-align:middle;
color:#FFF;
}
.xiao:hover{
cursor:pointer;
}
</style>
</head> <body>
<div id="da">
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">张海军</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">张琦伟</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">张胜国</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">继文楷</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">张三</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">李四</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">王五</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">猎人但</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">狗剩</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">王八蛋</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">狗屎</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">滚蛋</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">哈喽</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">凯奇</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">张海军</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">张琦伟</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">张胜国</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">继文楷</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">张三</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">李四</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">王五</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">猎人但</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">狗剩</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">王八蛋</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">狗屎</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">滚蛋</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">哈喽</div>
<div class="xiao" onclick="Dian(this)" onmousemove="Fang(this)">凯奇</div>
</div>
</body>
<script type="text/javascript">
function Dian(a)
{
var xiao=document.getElementsByClassName("xiao")
for(var i=0; i<xiao.length;i++)
{
xiao[i].removeAttribute("bs")
xiao[i].style.backgroundColor="#00F"
}
a.setAttribute("bs",1);
a.style.backgroundColor="red";
}
function Fang(b)
{
var xiao=document.getElementsByClassName("xiao")
for(var i=0; i<xiao.length;i++)
{
if(xiao[i].getAttribute("bs")!="1")
{
xiao[i].style.backgroundColor="#00F"
}
}
b.style.backgroundColor="red";
}
</script>
js选中变色，不选中鼠标放上变色的更多相关文章
- 抽屉head部分，hover应用，鼠标放上变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；
css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...
- 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
- 鼠标放上时显示隐藏的div或者其他代码的“jquery”的三种写法和“JavaScript”的一种写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 动态创建div（鼠标放上显示二维码）
最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...
- td里的内容宽度自适应 及 鼠标放上显示标题div title
td里的内容自适应宽度, 用 width:100%控制 strRight+="<td bordercolor='#DEDEDE' width='500px' height='50px' ...
- easyui 单元格超出鼠标放上弹出全部
其他方式:https://www.cnblogs.com/raitorei/p/9878192.html onLoadSuccess : function(data) { //单元格超出部分隐藏并鼠标 ...
- jq div鼠标放上、离开马上展开、收缩方法
<body> <div id="aa" style="width:500px; height:30px; border:1px solid #000&q ...
- 用CSS做长度超过长度显示‘...’，当鼠标放上时显示全部内容
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku ...
随机推荐
- python 几个简单算法详解
一.冒泡排序 基本思想:它的思路很有特点循环,两两向后比较.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数 ...
- 面试题总结（PS：只是我遇到的那些面试题，并不是经典面试题）
一.类和结构的区别,分别有什么应用.(参考:https://blog.csdn.net/yikeshu19900128/article/details/40400479) 1)类是引用类型,数据存放在 ...
- Centos6.5升级openssh、OpenSSL和wget
1.OpenSSL 1.1.查看版本 使用如下命令查看版本: openssl version 1.2.安装gcc依赖 yum -y install gcc gcc-c++ 1.3.安装配置 ./con ...
- XV Open Cup named after E.V. Pankratiev. GP of America
A. Area of Effect 首先最优解中必有一个点在圆的边界上. 若半径就是$R$,则枚举一个点,然后把剩下的事件极角扫描即可,时间复杂度$O(m(n+m)\log(n+m))$. 否则圆必然 ...
- HTML入门2
开始将注意力转移到具体的元素里和页面了. 在页面加载完成的时候,标签head里的内容不会显示出来,包含了页面的title和css样式以及一些元素据信息,比如作者,描述文档,下面将具体分析html文档里 ...
- 目录的rwx权限的意义
1.目录的r:列举查看目录下的内容 2.目录的w:向目录中写东西,如创建文件 3.目录的x:可以cd进去 例:查看/etc/passwd内容: `:对/有rx权限 `:对/etc/有rx权限 `:对/ ...
- 20 由属性查询学习到的ArcMap、javaScripts API相关操作
因项目需要,想要在属性查询的时候连同相关的图片一并查出来,但是因为要查询的图层众多,且字段不固定,而且还要方便后期维护,因此一个个单独配置并不是最优的解决方法 为实现这个功能,我想到如下几种解决方法 ...
- javascript的数组之includes()
includes()方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回true,否则返回false. var array1 = [1, 2, 3]; console.log(array ...
- [Luogu P1082]同余方程
题目链接 这道题求关于x的同余方程ax≡1(mod b)的最小正整数解.换而言之方程可以转换为ax+by=1,此时有y为负数.此时当且仅当gcd(a,b)|1时,方程有整数解. 于是乎这道题就变成了a ...
- 解决vue webApp使用lib-flexible和px2rem引用第三方ui库后，样式变小问题
首先,需要卸载项目中的postcss-px2rem. npm uninstall postcss-px2rem --save-dev 其次,安装postcss-px2rem-exclude npm i ...