文档章节

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

一行代码
 一行代码
发布于 2015/11/26 12:18
字数 322
阅读 754
收藏 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
javascript 控制 html元素 显示/隐藏

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

teacheryang
2012/05/03
0
0
浮动元素容器的clearing问题

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

阮一峰
2009/04/06
0
0
JQuery动态隐藏和显示DIV

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

LeBlancs
2016/12/22
81
0

没有更多内容

加载失败,请刷新页面

加载更多

FTP 协议 1.0

自己制作的FTP协议:

Explorer0
9分钟前
0
0
Android 通过DrawableInflater加载自定义Drawable

一、Drawable 在Android系统张,图形图像的绘制需要在画布上进行操作和处理,但是绘制需要了解很多细节以及可能要进行一些复杂的处理,因此系统提供了一个被称之为Drawable的类来进行绘制处理...

IamOkay
20分钟前
1
0
灵活无处安放,所以选择流浪....《漆黑的空间》& 《灰色轨迹》

灵活无处安放,所以选择流浪....《漆黑的空间》& 《灰色轨迹》

yizhichao
26分钟前
1
0
Kafka+Flink 实现准实时异常检测系统

1.背景介绍 异常检测可以定义为“基于行动者(人或机器)的行为是否正常作出决策”,这项技术可以应用于非常多的行业中,比如金融场景中做交易检测、贷款检测;工业场景中做生产线预警;安防...

架构师springboot
今天
7
0
DecimalFormat 类基本使用

/* * DecimalFormat 类主要靠 # 和 0 两种占位符号来指定数字长度 * 0 表示如果位数不足则以 0 填充 * # 表示只要有可能就把数字拉上这个位置 * */ public static void main(String[] args){...

嘴角轻扬30
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部