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实现简单日期格式化功能示例
Sep 19 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jquery更改元素属性attr()方法操作示例
May 22 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 smarty的预保留变量总结
2008/12/04 PHP
数组与类使用PHP的可变变量名需要的注意的问题
2013/06/20 PHP
php检测文本的编码
2015/07/26 PHP
php简单防盗链实现方法
2015/07/29 PHP
图片自动缩小 点击放大
2008/07/07 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
医学毕业生自荐信
2013/10/11 职场文书
英文版餐饮业求职信
2013/10/18 职场文书
中学教师岗位职责
2013/11/26 职场文书
献爱心倡议书
2014/04/14 职场文书
董事长秘书工作职责
2014/06/10 职场文书
工作检讨书怎么写
2014/10/10 职场文书
2014年图书室工作总结
2014/12/09 职场文书
大学生学年个人总结
2015/02/15 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android