鼠标移动实现样式改变
2016-07-24 20:57
507 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> ul{ margin-top:50px; list-style-type:none; } li{ width:100px; line-height:40px; height:40px; background-color:#099; float:left; text-align:center; border-right:1px solid #FFF; } </style> </head> <body> <ul> <li id="1" onMouseOver="checkstyle(this,id)">147</li> <li id="2" onMouseOver="checkstyle(this,id)">258</li> <li id="3" onMouseOver="checkstyle(this,id)">369</li> <li id="4" onMouseOver="checkstyle(this,id)">752</li> </ul> <script> var li=document.getElementsByTagName("ul")[0].getElementsByTagName("li"); var i; function checkstyle(obj,m) { obj.style.backgroundColor="red"; for(i=0;i<li.length;i++) { if(i+1!=m) { li[i].style.backgroundColor="#099"; } } } </script> </body> </html>
此处实现的方法是:
当数遍移动到一个元素时,遍历当前整个应用该样式的元素集,然后判断该元素如果不是当前鼠标移动在上面,则改变样式,否则不变。
相关文章推荐
- 鼠标移动实现样式改变
- CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位
- CSS3-文本颜色及功能
- CSS BACKGROUND汇总
- css3动画效果小结
- XML——XSL 样式单文档
- CSS——语法
- css笔记-透明度
- CSS——盒子模型
- HTML,DIV+CSS,js,JQ,UI-WEB前端设计经验
- CSS之Position详解
- CSS——块&行标签
- CSS3基础
- 简单整理下CSS里的常用各种选择器
- css3动画效果小结
- CSS3选择器
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)
- web前端开发分享-css,js工具篇
- 一些关于HTML与CSS的总结与实际应用
- CSS——背景属性