文档章节

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

一行代码
 一行代码
发布于 2015/11/26 12:18
字数 322
阅读 751
收藏 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
中山
子div撑不开父div的几种解决方法

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

荆瑶
2016/10/28
376
0
div+css样式表中display和visibility的实例分析

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

oecp
2011/06/22
0
0
CSS技巧!像table一样布局div

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

晨曦之光
2012/03/09
0
0
JS实现当前编辑行自动滚动至div显示区域

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

晨曦之光
2012/03/09
0
0
浮动元素容器的clearing问题

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

阮一峰
2009/04/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Flask 开发填坑

插件的选择: flask-security 真的是个鸡肋啊。自带的页面,好丑。还不如用flask-login来做呢。

pearma
40分钟前
2
0
讲述下 :LVM逻辑卷管理遇到的问题

LVM学习逻辑卷管理创建逻辑卷遇到的问题 1 实验环境 系统 内核 发行版本 CentOS 2.6.32-754.2.1.el6.x86_64 CentOS release 6.10 (Final) 由于是最小化安装没有xfs命令,yum安装如下包支持此...

linuxprobe16
今天
1
0
day95-20180922-英语流利阅读-待学习

Hey Jude 半个世纪传唱不衰的背后故事 毛西 2018-09-22 1.今日导读 2004 年,The Beatles 被《滚石》杂志选为“历史上最伟大的 50 位流行音乐家的第一位”。这四名来自英国利物浦的男孩不仅对...

飞鱼说编程
今天
2
0
OSChina 周六乱弹 —— 放假前期焦虑症晚期

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享Matteo的单曲《Panama》: 《Panama》- Matteo 手机党少年们想听歌,请使劲儿戳(这里) @新垣吉衣OSC :我发现只要去有小朋友...

小小编辑
今天
270
10
wait()被notify()后,接着执行wait()后面的语句

wait()被notify()后,接着执行wait()后面的语句

noteman
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部