博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
div容器里子元素的显示和隐藏控制
阅读量:6225 次
发布时间:2019-06-21

本文共 693 字,大约阅读时间需要 2 分钟。

  hot3.png

在前端开发的过程中,有时候需要实现这样的效果:

当鼠标悬停或点击container的时候,显示close,否则隐藏close。

这种效果可以使用js来实现,监听container的mouseover和click事件,触发时显示close,监听mouseleave事件,触发时隐藏close。

但是,这种实现方式对触摸屏不友好,为了让触摸屏上也有类似的效果,可以使用focus事件。

div默认是不支持focus事件的,所以需要在container上加上tabindex="-1",属性:

并写上样式:

div.container:focus div.close,div.container:hover div.close{    display:block;}

这样当div获得焦点或者鼠标悬停时,close就会显示出来。

然而,在ie浏览器(已知有wp8 的ie)下,即使加上了tabindex属性,div也无法直接获得焦点,所以需要js来监听click事件,来手动触发focus事件:

$("div.container").click(    function(){        $(this).focus();   }});

某些情况下,还可以给需要显示的元素加上hover和focus的css样式。

对于360安全浏览器极速模式,可以使用以下样式去除默认的焦点样式:

div[tabindex]:focus{outline:none;}

转载于:https://my.oschina.net/hwxn/blog/535846

你可能感兴趣的文章
Android训练课程(Android Training) - 添加活动栏(使用action bar)
查看>>
Unable to resolve target 'android-18'
查看>>
模拟键盘按键
查看>>
angularJS内置指令一览
查看>>
Redis的管理
查看>>
数字电路建模 - jchdl
查看>>
Tomcat6.x+jndi配置
查看>>
SDWebImage
查看>>
全同态加密算法
查看>>
搭建hexo博客
查看>>
shell编程(一)基础
查看>>
图的着色问题
查看>>
( 转)UVM验证方法学之一验证平台
查看>>
Jdbc&Web
查看>>
MySQL 数据类型
查看>>
对于WEB APP安全问题的一些思考
查看>>
《Unicast QoS Routing Algorithms for SDN Survey 2018》【毕设 - 论文阅读】
查看>>
修改上传文件控件的样式-----html,css
查看>>
Firebug控制台详解[转]
查看>>
使用Flash Builder 4.6出现 新建配置 失败 java.lang.NullPointerException错误
查看>>