基于jQuey实现鼠标滑过变色(整行变色)
在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实现此种功能是一个不错的选择。
废话不多说了,直接给大家贴jquery代码了,具体代码如下所示:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <style type="text/css"> ul,li{ list-style:none; font-size:12px; } li{ width:250px; height:25px; line-height:25px; } .hover{ background-color:#666; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ jQuery.hoverPlugin={ hover:function(selector){ $(selector).hover(function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); }); } }; $.hoverPlugin.hover(".mytest li"); }); </script> </head> <body> <ul class="mytest"> <li>1.俄罗斯爆发陨石雨,导致上千人受伤</li> <li>2.朝鲜成功进行核试验,半岛无核进程终结</li> <li>3.中国进入春运高峰期</li> </ul> </body> </html>
以上代码实现了所需功能,尽管不够美观,可以根据实际需求自行修改。实现的方法也非常的简单,就是利用hover()方法为hover事件绑定两个事件处理函数,以添加或者删除设置li元素背景颜色的CSS代码。
以上代码也很简单,大家有哪里不清楚的地方欢迎给我留言,我会及时给大家答复的,同时感谢大家一直以来对我们网站的支持。
相关推荐
-
jQuery实现选中行变色效果(实例讲解)
//点击复选框添加样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <
-
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
jQuery轻松实现表格的隔行变色和点击行变色的实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m
-
JS与jQuery实现隔行变色的方法
本文实例讲述了JS与jQuery实现隔行变色的方法.分享给大家供大家参考,具体如下: 传统的JS方法: <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> windo
-
jquery入门—选择器实现隔行变色实例代码
1.JQuery选择器继承了CSS.path语音的部分语法,允许通过标签名.属性名.内容对DOM元素进行快速.准确的选择. 2.JQuery选择器与JavaScript相比,具有代码简单.完善的检测机制的优势. 3.使用JQuery选择器实现隔行变色,示例代码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <T
-
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
本文实例讲述了jQuery实现Table表格隔行变色及高亮显示当前选择行效果.分享给大家供大家参考,具体如下: 最近客户要求高亮选择列表的功能,于是顺便做了个,作为记录. 前台代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
-
jquery实现效果比较好的table选中行颜色
jquery table选中行颜色(效果更好) 复制代码 代码如下: <html> <head> <style type="text/css"> .table-tr-title{ height: 26px; font-size: 12px; text-align: center; } .table-tr-content{ height: 18px; background: #FFFFFF; text-align: center; font-size:
-
基于jQuey实现鼠标滑过变色(整行变色)
在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实现此种功能是一个不错的选择. 废话不多说了,直接给大家贴jquery代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="
-
鼠标划过时整行变色
function overIt(){ var the_obj = event.srcElement; if(the_obj.tagName.toLowerCase() == "td"){ the_obj=the_obj.parentElement; the_obj.oBgc=the_obj.currentStyle.backgroundColor; the_obj.oFc=the_obj.currentStyle.color; the_obj.style.backgroundColor
-
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm
-
js实现鼠标滑过文字链接色彩变化的效果
本文实例讲述了js实现鼠标滑过文字链接色彩变化效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g
-
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
先給大家看看效果: 效果介紹: 鼠标滑过进度条改变进度值.兼容性: 可完美兼容IE6,IE7,IE8,Chrome,Firefox代码: 复制代码 代码如下: <script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script> <style type=
-
Delphi实现窗体感知鼠标滑过并自动隐藏与显示窗口的方法
本文实例讲述了Delphi实现窗体感知鼠标滑过并自动隐藏与显示窗口的方法.分享给大家供大家参考.具体实现方法如下: const WM_MouseEnter = $B013; WM_MouseLeave = $B014; type TfrmMain = class(TForm) . . Timer1: TTimer; procedure Timer1Timer(Sender: TObject); protected procedure WMMouseEnter(var Msg: TMessage)
-
一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin
-
基于jQuery创建鼠标悬停效果的方法
本文实例讲述了基于jQuery创建鼠标悬停效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 创建HTML: <ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul> 2. 选择.mainnav的class: $(".mainnav&qu
-
JavaScript实现鼠标滑过处生成气泡的方法
本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>鼠标周围在网页上生成气泡</title> </HEAD> <BODY bgColor=#000000 scroll=no onload=zyva()> <div id=aqua style="position:absolute;left=0;top=0;">
-
基于JavaScript实现鼠标向下滑动加载div的代码
废话不多说了,关键代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new
随机推荐
- HTML <!DOCTYPE> 标签
- JSP文件下载功能的4种方法
- MySQL连接无法解析HOST主机名的解决方法
- 如何防止JavaScript自动插入分号
- Python对两个有序列表进行合并和排序的例子
- PHP+MYSQL的文章管理系统(二)
- javascript基础知识
- 一个测试下载速度的shell脚本
- 兼容IE和Firefox的javascript获取iframe文档内容的函数
- Lua中使用元表(metatable)执行算术类元方法实例
- 从基础开始建立一个JS代码库第1/2页
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- 整理关于Bootstrap导航的慕课笔记
- 纯js实现仿QQ邮箱弹出确认框
- java对象初始化顺序验证示例
- C#清除WebBrowser中Cookie缓存的方法
- php 学习笔记第1/2页
- Python编程argparse入门浅析
- nginx+php出现No input file specified解决办法
- 易语言获取外网ip方法