利用jQuery实现鼠标滑过整行变色
在很多网站都有这样的效果，那就是当鼠标放在新闻列表一行上的时候，整行就会变色，虽然使用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实现鼠标滑过整行变色的更多相关文章
- CSS如何实现把鼠标放在行上整行变色
CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...
- CSS 如何实现当鼠标放在上面时整行变色呢？
摘要:下文讲述css中实现鼠标放在指定行上面时,整行变色的方法分享,如下所示: 实现思路:使用:hover伪类,实现当鼠标指向时,其背景色发生相应的变化,如下例所示: 例: 下文中的div,当鼠标放上 ...
- jQuery实现鼠标滑过图片列表加遮罩层
这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...
- 利用jQuery获取鼠标当前的坐标
文字来源:http://www.smalluv.com/jquery_code_106.html jQuery获取当前鼠标坐标位置: <div id="testDiv"> ...
- jQuery实现鼠标滑过导航栏呈现不同的样式
素材图片 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- jquery实现表格中点击相应行变色功能
对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en ...
- colgroup 整行变色
<table border="2" width="100%"> <colgroup span="2" align=&quo ...
- 实例讲解如何利用jQuery设置图片居中放大或者缩小
大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...
- select自定义箭头问题 。。。和一行内不同颜色的整体鼠标滑过变色
1.select自定义箭头问题 用<select><option></option></select>的时候自带的三角箭头与需要的三角不同,这是还要求有 ...
随机推荐
- POJ3182 The Grove[射线法+分层图最短路]
The Grove Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 904 Accepted: 444 Descripti ...
- EasyPlayerPro Windows播放器实时流进行本地缓冲区即时回放功能实现
背景描述 参照国内视频监控行业监控软件,实现当前视频的即时回放功能,例如: 监控人员发现刚刚的某个视频点有可疑,就像录像回放一样,想倒回去看一下,但又不想切换到录像回放界面, 此处就体现即时回放的价值 ...
- github Merge method
About merge methods on GitHub - User Documentation https://help.github.com/articles/about-merge-meth ...
- 【题解】P3162CQOI2012组装
[题解][CQOI2012]组装 考虑化为代数的形式,序列\(\left[a_i \right]\)表示选取的\(i\)种类仓库的坐标. \(ans=\Sigma(a_i-x)^2,(*)\),展开: ...
- JDK动态proxy原理解析
转: 之前虽然会用JDK的动态代理,但是有些问题却一直没有搞明白.比如说:InvocationHandler的invoke方法是由谁来调用的,代理对象是怎么生成的,直到前几个星期才把这些问题全部搞明白 ...
- 改善程序与设计的55个具体做法 day1
博客好久没更新了,就从这本读书笔记开始吧. 条款01: 视C++为一个语言联邦 C++可视为有四个次语言组成的: 1.C语言 2.Object-Oriented C++ (面向对象C++) 3.Tem ...
- JVM性能分析工具详解--MAT等
获得堆转储文件 巧妇难为无米之炊,我们首先需要获得一个堆转储文件.为了方便,本文采用的是 Sun JDK 6.通常来说,只要你设置了如下所示的 JVM 参数: -XX:+HeapDumpOnOutOf ...
- BZOJ 3671 NOI2014 随机数生成器
这题其实是个暴力. 首先那一堆如何构造n*m方格的东西都是在玩你. 构造出来方阵后,由于是一个排列,不存在重复,可以大力贪心. 每次将选出一个最小的元素,然后将它右上左下的元素全部打上标记(记得bre ...
- oracle数据库用户创建删除以及数据导入
dmp文件的导入:1.首先,先创建表空间与用户--创建表空间create tablespace CCFOCUS01datafile 'D:\app\Administrator\oradata\orcl ...
- RStudio安装package时出现错误
cannot open URL 'http://www.stats.ox.ac.uk/pub/RWin/src/contrib/PACKAGES' 提示是打不开链接,你切换为国内的源试试Rstudio ...