在很多网站都有这样的效果，那就是当鼠标放在新闻列表一行上的时候，整行就会变色，虽然使用CSS也能够实现此种功能，但是由于众多浏览器版本对于CSS3并没有良好的支持，所以在当前情况下，使用jQuery实现此种功能是一个不错的选择。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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实现鼠标滑过整行变色的更多相关文章

  1. CSS如何实现把鼠标放在行上整行变色

    CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...

  2. CSS 如何实现当鼠标放在上面时整行变色呢？

    摘要:下文讲述css中实现鼠标放在指定行上面时,整行变色的方法分享,如下所示: 实现思路:使用:hover伪类,实现当鼠标指向时,其背景色发生相应的变化,如下例所示: 例: 下文中的div,当鼠标放上 ...

  3. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

  4. 利用jQuery获取鼠标当前的坐标

    文字来源:http://www.smalluv.com/jquery_code_106.html jQuery获取当前鼠标坐标位置: <div id="testDiv"> ...

  5. jQuery实现鼠标滑过导航栏呈现不同的样式

    素材图片 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. jquery实现表格中点击相应行变色功能

    对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en ...

  7. colgroup 整行变色

    <table border="2" width="100%"> <colgroup span="2" align=&quo ...

  8. 实例讲解如何利用jQuery设置图片居中放大或者缩小

    大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...

  9. select自定义箭头问题 。。。和一行内不同颜色的整体鼠标滑过变色

    1.select自定义箭头问题 用<select><option></option></select>的时候自带的三角箭头与需要的三角不同,这是还要求有 ...

随机推荐

  1. Swift 学习笔记 (继承)

    一个类可以从另一个类继承方法.属性和其他的特性.当一个类从另一个类继承的时候,继承的类就是所谓的子类,而这个类继承的类被称为父类. 在 Swift 中类可以调用和访问属于它们父类的方法.属性和下标脚本 ...

  2. 列举Python常用数据类型并尽量多的写出其中的方法

    #1 把字符串的第一个字符大写 string.capitalize() #2 返回一个原字符串居中,并使用空格填充至长度 width 的新字符串 string.center(width) #3 返回 ...

  3. python数据分析之：绘图和可视化

    在数据分析领域,最出名的绘图工具就是matlib.在Python同样有类似的功能.就是matplotlib.前面几章我们都在介绍数据的生成,整理,存储.那么这一章将介绍如果图形化的呈现这些数据.来看下 ...

  4. php微信支付测试开发（流程已通）

    必要条件: appid //公众号后台开发者中心获得(和邮件内的一样)   mchid//邮件内获得  key//商户后台自己设置  appsecret //公众号开发者中心获得 两个证书文件,邮件内 ...

  5. linux卸载软件

    rpm -q -a 查询当前系统安装的所有软件包 rpm -e 软件包名 参数e的作用是使rpm进入卸载模式,对名为某某某的软件报名进行卸载 rpm -e 软件包名 -nodeps 由于系统中各个软件 ...

  6. uboot中添加自定义命令

    uboot中可以通过修改源程序来添加自定义命令,进一步扩展uboot的功能. 我想在uboot下添加一条新的命令(名为varcpy),用来拷贝uboot中的环境变量. 修改方式如下: 创建新文件com ...

  7. 如何去掉ArrayList重复的id

    今天,也同样跟你一样寻找这个问题的解决办法, 如何去掉ArrayList重复的id 百度中找到这么一句话,为什么想到要去掉呢?为什么不反过来想,我在往ArrayList里添加的时候不让重复的项加入呢? ...

  8. 深入理解JVM - 线程安全与锁优化 - 第十三章

    线程安全 当多个线程访问一个对象时,如果不用考虑这些线程在运行时环境下的调度和交替执行,也不需要进行额外的同步,或者在调用方法进行任何其他的协调操作,调用这个对象的行为都可以获得正确的结果,那么这个对 ...

  9. BZOJ 1685 [Usaco2005 Oct]Allowance 津贴：贪心【给硬币问题】

    题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=1333 题意: 有n种不同币值的硬币,并保证大币值一定是小币值的倍数. 每种硬币的币值为 ...

  10. 牛客网暑期ACM多校训练营（第三场）G：Coloring Tree（函数的思想）

    之前两次遇到过函数的思想的题,所以这次很敏感就看出来了.可以参考之前的题: https://www.cnblogs.com/hua-dong/p/9291507.html Christmas is c ...