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的hover选择器,实现选中元素突出显示方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
JS实现css hover操作的方法示例
本文实例讲述了JS实现css hover操作的方法.分享给大家供大家参考,具体如下: hover我们可以用css的方式写,当然,也可以用js的方式写 <html> <head> <title>js的下拉菜单效果</title> <style type="text/css"> *{ padding:0px; margin:0px; } ul li{ list-style: none; } a{ text-decoration:
-
jQuery中多个元素的Hover事件解决方案
1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: 复制代码 代码如下: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fun2函数,这种API已能够满足绝大部分需求. 不过,有些时候我们希望当鼠标进入两个或多个元素时触发fun1,离开他们时触发fun2,而在这些元素间移动鼠标并不触发任何事件.例如两个元素紧挨着的HTML元素,如下图: 当鼠标进入二者的区域时触发fun1,离开时触发fun2.你也许
-
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果,一开始,表格透明度不变. 当我鼠标移动到第二排第三个单元格,其他单元格降低透明度. 解决方法 一开始,我用的是CSS实现方法,是下面这样 #table td{ opacity:0.5; } #table td:hover{ opacity:1; } 不过这样一开始进去的时候表格透明度就是0.5,看起来很不好.
-
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
本文实例讲述了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法.分享给大家供大家参考,具体如下: 先看如下代码: /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } /** * 全不选 */ function uncheckAll() { $("input[name=ids]&quo
-
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
本文实例讲述了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法.分享给大家供大家参考,具体如下: 先看如下代码: /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } /** * 全不选 */ function uncheckAll() { $("input[name=ids]&quo
-
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
情景描述 Layui数据表格中用到了表单元素radio,在当前页面选中radio状态,并同步更新到保存表格中所有的数据的数组中(获取表格中的所有数据并保存到数组中),再点击分页组件中的下一页.上一页.跳转按钮进行切换另外一个页面,然后在切换回之前的页面,会发现在以前页面上radio状态全部恢复默认了,我们当然是希望能保存住前一页radio的选中状态. 我写项目遇到的一个的情况:在第一页选中的radio的状态,点击下一页按钮切换到第二页,然后再点击上一页切换会第一页,第一页中的radio状态就恢复
-
jquery中的常用事件bind、hover、toggle等示例介绍
1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果.但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发window.onload事件.而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后,代码就可以运行,但并不意味着所有关联文件都已经下载完毕. 一个页面中一般只有一个onload事件处理程序
-
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
一直没什么兴趣看jQuery,就用自己那点不咋样的javascript硬撑着,今天写一个功能时想尝试一下,用bind注册事件时发现怎么都不好使 复制代码 代码如下: $("#txtStation").bind("onpropertychange", GetStationLevel); 然后onclick之类的都试了,没一个能用的,无奈去翻jQuery的API,都是鸟语我也看不懂具体说了点了,但是发现bind注册事件都是没有on的. 发现有change事件,试了试 复
-
jquery中$each()方法的使用指南
$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象-尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数. each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, J
-
jquery中常用的函数和属性详细解析
Dom:Attribute:属性$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map$("input").attr({"checked", "checked"}); $("img").
-
jQuery学习笔记之jQuery中的$
在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuery的用法.作为基础 1.选择器 在css中,选择器的作用是选择页面的某一类(类别选择器)元素或者某个(id选择器).而jQuery中的"$"作为选择器,同样是选择某类或者某个元素,只不过jQuery提供了更全面的选择方式.而且为用户处理了浏览器兼容问题. 例如在在css<h2>
-
jQuery中的each()详细介绍(推荐)
each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等 在javaScript开发过程中使用$each可以大大的减轻我们的工作量. 下面提一下each的几种常用的用法 each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i);
随机推荐
- Linux上的文件搜索命令实例详解
- Linux 和Windows 安装Git 步骤详细介绍
- Access转SqlServer的注意事项
- IOS 开发之NSURL基本操作
- 点击button获取text内容并改变样式的js实现
- thinkPHP模板中for循环与switch语句用法示例
- C 语言基础教程(我的C之旅开始了)[三]
- 浅谈JavaScript中定义变量时有无var声明的区别
- java留言管理系统中模糊查询实例分享
- android开发之横向滚动/竖向滚动的ListView(固定列头)
- 用js查找法实现当前栏目的高亮显示的代码
- Win7下手动安装apache2.2、php5.4笔记
- python list使用示例 list中找连续的数字
- SQL查询出表、存储过程、触发器的创建时间和最后修改时间示例
- php自动获取目录下的模板的代码
- linux使用tcpdump命令监视指定网络数据包的方法
- Java注解实现动态数据源切换的实例代码
- Android图片选择器 丰富的配置选项
- js实现当前输入框高亮显示的方法
- c# Graphics使用方法(画圆写字代码)