文档章节

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

一行代码
 一行代码
发布于 2015/11/26 12:18
字数 322
阅读 751
收藏 0
点赞 0
评论 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
博文 16
码字总数 13190
作品 0
中山
子div撑不开父div的几种解决方法

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

荆瑶 ⋅ 2016/10/28 ⋅ 0

div+css样式表中display和visibility的实例分析

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

oecp ⋅ 2011/06/22 ⋅ 0

CSS技巧!像table一样布局div

下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

JS实现当前编辑行自动滚动至div显示区域

最近在正在做的会计系统实施过程中,客户要求在录入凭证分录时,实现每次录入的分录自动选中,并且如果分录在其所在的div隐藏区域时,将其滚动至显示区域。由于先前已经实现JS控制的当前行高...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

javascript 控制 html元素 显示/隐藏

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

teacheryang ⋅ 2012/05/03 ⋅ 0

浮动元素容器的clearing问题

网页设计时,我经常遇到下面这个问题,一直不知道怎么解决。 今天,总算全部理解了,一定要写下来。 1. 问题的由来 有这样一种情形:在一个容器(container)中,有两个浮动的子元素,如图一...

阮一峰 ⋅ 2009/04/06 ⋅ 0

JavaScript 多级联动浮动(下拉)菜单 (第二版)

上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高。 这次除了修改已发现的问题外,还对程序做了大幅调整和改进,使程序实用...

青夜之衫 ⋅ 2017/12/05 ⋅ 0

JQuery动态隐藏和显示DIV

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

LeBlancs ⋅ 2016/12/22 ⋅ 0

display的设置

标准流 HTML元素在标准状况下的定位方式 行内元素在同一行内横向排列 块级元素占满整个一行,在页面中竖向排列 元素不会移动到其它地方去,对于嵌套的元素盒子也是嵌套的关系 行内元素的盒子...

RanoB ⋅ 2016/12/23 ⋅ 0

前端基础---CSS

CSS 1.CSS语法 CSS 规则由两个主要的部分构成选择器以及一条或多条声明 selector{ property:value; property:value; ... property: value } 例如 h1 {color:red; font-size:14px;} 2.CSS的四...

迟到的栋子 ⋅ 2017/10/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

20.zip压缩 tar打包 打包并压缩

6月25日任务 6.5 zip压缩工具 6.6 tar打包 6.7 打包并压缩 6.5 zip压缩工具: zip支持压缩目录 zip压缩完之后原来的文件不删除 不同的文件内容其实压缩的效果不一样 文件内有很多重复的用xz压...

王鑫linux ⋅ 4分钟前 ⋅ 0

double类型数据保留四位小数的另一种思路

来源:透析公式处理,有时候数据有很长的小数位,有的时候由在四位以内,如果用一般的处理方法,那么不足四位的小树会补充0到第四位,这样子有点画蛇添足的感觉,不太好看。所以要根据小数的...

young_chen ⋅ 10分钟前 ⋅ 0

Python 优化 回溯下降算法

使用sympy构造表达式,实现回溯下降算法 画出函数图像,先使用暴力搜索,找到最小值约为2.5左右 然后选定初始点,开始进行回溯搜索,下降方向为负梯度方向 下降的误差与步数大致呈现下面的状...

阿豪boy ⋅ 15分钟前 ⋅ 0

Django配置163邮箱出现 authentication failed(535)错误解决方法

最近用Django写某网站,当配置163邮箱设置完成后,出现535错误即:smtplib.SMTPAuthenticationError: (535, b'Error: authentication failed') Django初始配置邮箱设置 EMAIL_HOST = "smtp.1...

陈墨轩_CJX ⋅ 17分钟前 ⋅ 0

用接口模拟可伸缩枚举(34)

1、枚举的可伸缩性最后证明都不是什么好点子 扩展类型的元素是基本类型实例,基本类型的实例却不是扩展类型的元素,很混乱 目前还没有很好的方法来枚举基本类型的所有元素,及其扩展 可伸缩性...

职业搬砖20年 ⋅ 20分钟前 ⋅ 0

Ubuntu18.04 IDEA快捷键无法使用

IDEA默认的回退到上一视图的快捷键是Ctrl + Alt + Left,在ubuntu中这个快捷键被占用了,在16.04中可以在界面中取消这个快捷键,但是18.04就看不到了,可以使用以下命令解决 gsettings set ...

Iceberg_XTY ⋅ 24分钟前 ⋅ 0

如何解决s权限位引发postfix及crontab异常

一、问题现象 业务反馈某台应用服务器,普通用户使用mutt程序发送邮件时,提示“postdrop warning: mail_queue_enter: create file maildrop/713410.6065: Permission denied”,而且普通用法...

问题终结者 ⋅ 37分钟前 ⋅ 0

Unable to load database on disk

由于磁盘空间满了以后,导致zookeeper异常退出,清理磁盘空间后,zk启动报错,信息如下: 2018-06-25 17:18:46,904 INFO org.apache.zookeeper.server.quorum.QuorumPeerConfig: Reading co...

刀锋 ⋅ 56分钟前 ⋅ 0

css3 box-sizing:border-box 实现div一行多列

<!DOCTYPE html><html><head><style> div.container{ background:green; padding:10px 10px;}div.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Fir......

qimh ⋅ 今天 ⋅ 0

Homebrew简介和基本使用

一、Homebrew是什么 Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径...

说回答 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部