jQuery中hover方法实现选中元素突出显示
程序员文章站
2022-04-24 17:42:14
...
本文主要为大家带来一篇jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
今天做帮一个师姐做网页遇到一个这样的要求:
鼠标不移动进表格,表格透明度不变。
鼠标移动进表格,hover到的单元格透明度不变,没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中的有趣的 border
下一篇: CSS的相邻兄弟选择器用法示例讲解
推荐阅读
-
jquery实现选泽选中li中的span元素的css样式变化
-
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
-
Jquery中复选框选中取消实现文本框的显示隐藏
-
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
-
vue中改变选中当前项的显示隐藏或者状态的实现方法
-
jquery实现选泽选中li中的span元素的css样式变化
-
Jquery中复选框选中取消实现文本框的显示隐藏
-
JQuery 在文档中查找指定name的元素并移除的实现方法_jquery
-
jQuery中hover方法实现选中元素突出显示
-
jQuery实现网站添加高亮突出显示效果的方法_jquery