CSS鼠标悬浮DIV后显示DIV外的按钮
昨天写样式遇到个问题,如何让鼠标悬浮DIV后,显示DIV外的按钮,可以点击到按钮。
效果如下:

问题:
在DIV hover时候将按钮设为display: block,这是很直接的想法,但是这有个问题,就是在悬浮出现按钮后,鼠标要移到按钮上过程中,离开了DIV经过间距时,按钮就会消失。
解决办法:
1. 选择更大区域的DIV
这个时候hover出现的按钮,由于鼠标还在DIV(大区域)中,所以按钮是可以正常点到的。但这个方法问题在于扩大了触发区域,如果本意上是要最初的DIV来触发,那这个方法就不行。
2.增加一个不可见层

如蓝色框所示,在DIV增加一个绝对定位的区域至按钮底下,这样在鼠标移到按钮过程中,都属于在DIV内部,按钮也就不会消失。这个方法的好处在于,绝对适当的触发区域。
div{
position:absolute;
.hover-help{
position: absolute;
height: 20px;
width: 26px;
left: -20px;
bottom:;
}
}
CSS鼠标悬浮DIV后显示DIV外的按钮的更多相关文章
- 利用JS做到隐藏div和显示div
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById( ...
- ZedGraph的曲线的LineItem对象的Tag属性存储信息进而在鼠标悬浮时进行显示
场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
- css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图 当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
- js:鼠标移动到文字显示div,移出文字div显示,鼠标能移进div
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- 鼠标点击DIV后,DIV的背景变色(js)
<!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- CSS 鼠标选中文字后改变背景色的实现代码
废话不多说,直接上代码 ::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF; ...
- IE 选择文字后 显示小箭头 加速按钮
IE - 工具 - Internet选项 - 高级 - 不选择<在选择是显示加速按钮>选项就可以了.
- JavaScript在div后添加删除div
var idd = 'str'; $('.task-done-detail-content-p7').click(function () { var id = this.id; if(idd !== ...
随机推荐
- MONGODB(二)——索引操作
一.1.插入10w条数据> for(var i = 0;i<100000;i++){... var rand = parseInt(i*Math.random());... db.pers ...
- .NET CORE实践(1)--Ubuntu下的Hello World
准备工作 使用Hyper-V安装Ubuntu16.04桌面版 因为是作为类似日记的记录,所以写的时候事无巨细,稍显啰嗦. 打开微软.NET官网 apt-get install 打开dotnetcore ...
- [转]windows 10 搭建angular开发环境
本文转自:https://www.cnblogs.com/lilunpai/articles/7992538.html 一.环境介绍 1.开发环境:Windows10 2.开发ide工具:VS cod ...
- [转]docker基础详解
本文转自:https://blog.csdn.net/xsj_blog/article/details/71700032 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...
- 【转载】C#工具类:FTP操作辅助类FTPHelper
FTP是一个8位的客户端-服务器协议,能操作任何类型的文件而不需要进一步处理,就像MIME或Unicode一样.可以通过C#中的FtpWebRequest类.NetworkCredential类.We ...
- Java学习笔记之——构造方法
构造方法:方法名和类名相同且没有返回值 1.作用 创建对象 对象初始化 2.普通方法的结构 权限修饰符 返回值类型 方法名(形参){ 方法体: } 3. 构造方法的结构 (1)结构 权限修饰符 方法名 ...
- virtualbox中设置u盘启动
1.在磁盘管理中查看u盘的磁盘号X 2.管理员运行cmd,进入virtualbox目录 3.运行命令: VBoxManage internalcommands createrawvmdk -filen ...
- Asp.net生命周期与Http协议
Http协议,底层的东西还是不是特别熟悉,感觉要经过沉淀之后才能理解这些东西吧 1.Asp.net生命周期 Asp.net生命周期: 从发起请求开始,到IIS进行处理的全部过程,然后再到获取结果 当请 ...
- JavaScript定时器实现的原理分析
原文链接:http://www.cnblogs.com/st-leslie/p/6082450.html 一.储备知识 在我们在项目中一般会遇见过这样的两种定时器,第一种是setTimeOut,第二种 ...
- JS中数组重排序方法
在数组中有两个可以用来直接排序的方法,分别是reverse()和sort().下面通过本文给大家详细介绍,对js数组重排序相关知识感兴趣的朋友一起看看吧 1.数组中已存在两个可直接用来重排序的方法:r ...