jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法


Posted in jQuery onMay 08, 2017

今天做帮一个师姐做网页遇到一个这样的要求:

鼠标不移动进表格,表格透明度不变。

鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变。

先贴我已经实现好的效果,一开始,表格透明度不变。

jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法

当我鼠标移动到第二排第三个单元格,其他单元格降低透明度。

jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法

解决方法

一开始,我用的是CSS实现方法,是下面这样

#table td{
 opacity:0.5;
}
#table td:hover{
 opacity:1;
}

不过这样一开始进去的时候表格透明度就是0.5,看起来很不好。

后来我就用jQuery的hover方法,不过它总是选中了里面的所有单元格,这其中过程很曲折,我就不一一介绍了,我就讲讲我怎么实现的。

$('#content td').hover(
  function(){
   $('#content td').css('opacity','0.5');
   $('#content td:hover').css('opacity','1');
   },
  function(){
   $('#content td').css('opacity','1');
  });

content是我table的id名,可以看到我们对单元格hover方法里面加了两个function

第一个funtion移动到表格时,首席

$('#content td').css('opacity','1');

表示鼠标移动进去的时候,所有单元格透明度为0.5,然后

$('#content td:hover').css('opacity','1');

这里的css的hover选择器表示选中单个单元格。

第二个funtion表示鼠标离开表格时

以上这篇jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
jquery仿微信聊天界面
May 06 #jQuery
简单实现jQuery弹幕效果
May 06 #jQuery
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
You might like
php微信公众号开发之微信企业付款给个人
2018/10/04 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
JS模拟多线程
2007/02/07 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
2013/04/23 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
儿科护士自我鉴定
2013/10/14 职场文书
个人现实表现材料
2014/02/04 职场文书
在职证明范本
2015/06/15 职场文书
房屋产权证明书
2015/06/19 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书