通过CSS效果:隔行变色和鼠标掠过高亮,学习JQuey的css()、hover()方法
2015-02-01 11:24
393 查看
下面的HTML和CSS能够实现div的隔行变色:
如果要实现效果:鼠标移到某一行上,改变背景和文字颜色;鼠标移除,还原以前的背景和文字颜色。
JQuery代码可以实现这个效果:
可以看到使用JQuery非常的简单:
1、提供了hover()这个API,接收2个函数,对应mouseover和mouseout。
2、将背景和文字颜色置空,即可还原元素在mouseover之前的颜色,非常棒。
3、支持rgb格式和十六进制格式的颜色值,免去了我们需要做颜色转换的麻烦。
所以这篇博客中提到的RGB转HEX格式,没有什么实际的用处,不过这个算法写的还是很好的,在此记录下:
<head> <style> #container div{ width:200px; height:25px; font-size:14px; text-align:center; color:#474747; } .even{ background-color: #EDEDED; } .odd{ background-color: #FAFAFA; } </style> </head> <body> <div id="container"> <div class="even">1</div> <div class="odd">2</div> </div> </body>
如果要实现效果:鼠标移到某一行上,改变背景和文字颜色;鼠标移除,还原以前的背景和文字颜色。
JQuery代码可以实现这个效果:
$("#container div").hover(function(){ // 鼠标经过时,改变背景色和文字颜色 $(this).css("backgroundColor","#346ba3"); $(this).css("color","rgb(255,255,255)"); },function(){ // 鼠标移除,还原背景色和文字颜色 $(this).css("backgroundColor",""); $(this).css("color",""); });
可以看到使用JQuery非常的简单:
1、提供了hover()这个API,接收2个函数,对应mouseover和mouseout。
2、将背景和文字颜色置空,即可还原元素在mouseover之前的颜色,非常棒。
3、支持rgb格式和十六进制格式的颜色值,免去了我们需要做颜色转换的麻烦。
所以这篇博客中提到的RGB转HEX格式,没有什么实际的用处,不过这个算法写的还是很好的,在此记录下:
function rgb2hex(rgb) { function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); }
相关文章推荐
- CSS鼠标滑过变色效果
- [css特效]A标记的经典效果:鼠标放到A的整行上,背景变色(鼠标没在文字上)
- 通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- css基础 :hover 鼠标放在父元素上,子元素变色
- css 设置鼠标滑过变色效果
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
- Jquery的hover方法让鼠标经过li时背景变色
- 动画—CALayer的初步学习三:CALayer绘图—通过代理方法绘图扩展1.2(带阴影效果的绘图和图层的形变)(学会从博客上自学)
- css的hover事件,如果点击之后通过js操作样式,hover事件就会失效的处理方法,外部css样式与js的DOM样式谁的权重高?
- Jquery的hover方法让鼠标经过li时背景变色
- CSS鼠标悬停图片加边框效果,不位移的方法
- CSS实现DIV感应鼠标Hover时的显示隐藏效果
- 实现鼠标经过背景变色的方法有很多,今天我们介绍的是用CSS+DIV实现的方法。
- css控制表格样式 鼠标经过变色效果
- Jquery的hover方法让鼠标经过li时背景变色
- javascript表格隔行变色加鼠标移入移出及点击效果的方法
- CSS实现鼠标悬停图片时的边框变色效果
- 阴影效果CSS收藏+按钮鼠标移上缓慢变色代码
- 通过DIV+CSS实现 一块没有连接的区域实现鼠标事件的动态效果