用:hover伪类代替js的hover事件
制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如:
$(".nav").hover(function(){
$("sub-nav").addClass("show");
},
function(){
$("sub-nav").removeClass("show");
});
第一个function实现鼠标移上去的样式,第二个function实现鼠标移开的样式,于是就实现了简单的下拉菜单功能。
之前一直这样做没有任何问题,然而直到昨天遇到一个问题:元素已经有click事件实现此功能时,再用hover事件实现一样的功能,hover就会影响click事件,并去掉点击事件的功能。举个例子:
一个导航,为当前点击的导航添加current样式,然后要实现鼠标移动到的当前元素也添加current事件,这时再用hover事件,通过点击添加的current样式会被hover事件影响,并且再次点击添加样式无效。
:hover伪类
纠结了半天,请教了一下同事,同事说没有必要用hover事件啊,用伪类一下就解决了,于是在她的指导下豁然开朗。
.nav li.current,.nav li:hover{
//css code
}
current是当前需要的样式,然后利用:hover与current共用一个样式,简单的一个思路的转换就能解决问题了。同理,菜单显示问题:
.nav:hover .sub-nav{
display:block;
}
总结:有时候需要转换一下思维,找到实现问题最简单的方法,而不是一直纠结在问题中。
用:hover伪类代替js的hover事件的更多相关文章
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- CSS :hover伪类选择定义和用法
伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...
- CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...
- 利用CSS hover伪类改变其他元素的总结
:hover 伪类经常用于页面的一些鼠标交互.链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果. 1.hover改变自身的效果: 鼠标悬浮 ...
- 【笔记】css hover 伪类控制其他元素
最近在模仿一个网站的项目 当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的 但是这有一个要求 就是添加hov ...
- CSS快速入门-鼠标悬浮(hover伪类)
一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...
- css -- hover伪类
CSS代码: .btn-setDefaultGateway{display: none;} .netDiv:hover span .btn-setDefaultGateway { display: i ...
- a:hover伪类在ios移动端浏览器内无效的解决方法
a:hover 设置的样式在ios系统的浏览器内显示不出来,看来在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态. 方法 一: ...
- css:hover伪类的使用
:hover的使用,即当鼠标指针移入元素时,所做出的样式设置 示例一 <!DOCTYPE html> <html lang="en"> <head&g ...
随机推荐
- UEFI引导在GPT分区下安装win2008——抓住那只傲娇的win2008
上周遇到个客户DELL R520的服务器新采购了8块3T硬盘做备份服务器,raid配置5+1,一个磁21.8T.先用普通的装desktop OS的方法发现进去没raid盘,然后就按照官方的文档进入Li ...
- 易语言调用windows消息函数
1.SendMessageCallbackA的调用方法 .版本2 .DLL命令 发送消息返回_, 整数型, "user32.dll", "SendMessageCallb ...
- Oracle EBS FND User Info API (转) EBS用户账号密码职责相关
. 与用户信息相关API PKG. --和用户处理有关的API FND_USER_PKG; --和用户密码处理有关的API FND_WEB_SEC; --和用户职责处理有关的API FND_USER_ ...
- Something about Linux
Linux-一切皆文件 VMnet1 Host-Only网络下的虚拟交换机 VMnet8 虚拟NAT网络下的虚拟交换机 桥接模式 虚拟出同一网段下都能访问的服务器 ---------- ...
- centos 配置 ssl服务
使用的是appach 2.4.10 版本 各个版本配置不同 1.首先修改httpd.conf 文件 appach 安装目录下的 conf文件夹中找到 #LoadModule socache_shmcb ...
- jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
jQuery(function ($) { // 备份jquery的ajax方法 var _ajax = $.ajax; // 重写ajax方法,先判断登录在执行succes ...
- Java 邮件发送
<dependency> <groupId>javax.mail</groupId> <artifactId>mail</artifactId&g ...
- JavaScript界面传值与前后台互调
话说曾在校时,前端的第一门课程HTML静态网页设计,其老师,真是应了他的名字: 路遥知马力. 整个学期硬是全部在 Dreamwear 中进行拖拽控件来教学,未曾教授一句代码.成功忽悠了全体学生,课上一 ...
- 161226、js日期格式化
JavaScript Date format(js日期格式化) 方法一:// 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季 ...
- 虚拟机安装Centos7 , 没有可用的网络设备【ifconfig 只有lo而没有eth0的解决办法】
今天尝试再一次安装CentOS的时候,搞了半天不知何故上不了网络,网上的以下方式试了 也不管用,原因就是我下载的是CentOS7 64版本,从而导致了这个问题,具体如下描述: 第一次安装的时候,没有可 ...