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操作css样式
May 15 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jquery树形插件zTree高级使用详解
Aug 16 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下使用strpos需要注意 === 运算符
2010/07/17 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
2018/09/20 jQuery
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
int在python中的含义以及用法
2019/06/27 Python
详解Python绘图Turtle库
2019/10/12 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
python标准库OS模块详解
2020/03/10 Python
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
社区平安建设方案
2014/05/25 职场文书
七一建党节演讲稿
2014/09/11 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
2015年征兵工作总结
2015/07/23 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书