文档章节

div容器里子元素的显示和隐藏控制

一行代码
 一行代码
发布于 2015/11/26 12:18
字数 322
阅读 874
收藏 0

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

<div class="container">
<div class="close"></div>
</div>

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

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

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

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

<div class="container" tabindex="-1">
<div class="close"></div>
</div>

并写上样式:

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;
}


© 著作权归作者所有

一行代码
粉丝 2
博文 18
码字总数 13190
作品 0
中山
私信 提问
threejs之显示Label-CSS2DRenderer

一、如果我们在场景图上标识一些文字,有2种常用的方法 1、采用threeJs的精灵(Sprite),具体用法查看我另一篇博客https://my.oschina.net/u/2612473/blog/3038066 2、使用CSS2DRenderer 二...

tianyawhl
05/30
764
0
div+css样式表中display和visibility的实例分析

从学习div+css样式表到现在用div+css样式表写页面最容易混淆的css样式表属性也莫过于display和visibility。从display和visibility的表现意思来看,没有什么不同,其实它们的差别却是很大的。 ...

oecp
2011/06/22
109
0
子div撑不开父div的几种解决方法

子div撑不开父div的情况: 显示结果: 解决方法: (一):加<div style="clear:both;"></div> 代码实例: 显示结果: 分析: 父div作为外部容器,子div设置了float样式,则外部容器div因为内...

荆瑶
2016/10/28
3K
0
javascript 控制 html元素 显示/隐藏

javascript 控制 html元素 显示/隐藏 1。编写js函数 2. 要显示/隐藏的html元素加上 id 属性

teacheryang
2012/05/03
0
0
JQuery动态隐藏和显示DIV

JQuery动态隐藏和显示DIV 1. 如果在载入是隐藏: <head><script language="javascript">function HideWeekMonth(){ }</script></head> <body onLoad="HideWeekMonth()"></body> 2. 动态隐藏和......

LeBlancs
2016/12/22
149
0

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
9
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部