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 !== ...
随机推荐
- [转]WEB页获取串口数据
本文转自:https://www.cnblogs.com/rockyhm/p/3434200.html 最近做一个B/S的项目,需要读取电子秤的值,之前一直没做过,也没有经验,于是在网上找到很多 大 ...
- .Net NPOI 上传excel文件、提交后台获取excel里的数据
1.导入NPOI.dll 2.添加类NPOIExcel.cs using System; using System.Collections.Generic; using System.Text; us ...
- 在SoapUI中模拟用户操作
SoapUI作为一款接口测试工具,具有极大的灵活性和拓展性.它可以通过安装插件,拓展其功能.Selenium作为一款Web自动化测试插件可以很好的与SoapUI进行集成.如果要在SoapUI中模拟用户 ...
- JQuery官方学习资料(译):Attributes
Attributes 元素的属性可以为你的应用程序包含有用的信息,重要的是能够获取和设置它. .attr()方法 .attr()方法是可获取和可设置的,在设置状态下,.attr()可以 ...
- 【WebSocket No.3】使用WebSocket协议来做服务器
写在开始 上面一篇写了一篇使用WebSocket做客户端,然后服务端是socke代码实现的.传送门:webSocket和Socket实现聊天群发 本来我是打算写到一章上的,毕竟实现的都是一样的功能,后 ...
- [android] android下junit测试框架配置
我们的业务代码一般是放在一个新的包下面,这个业务类不能够通过右键run as java application,因为android项目只能运行在手机上的dalvak虚拟机里面 新建一个包,里面写测试类 ...
- Spring Bean的生命周期相关博客
最近得面试题一直 问 Spring 得生命周期,鉴于自己还未阅读过源码 所以只能是自己 背一波了.属实不懂硬背得作用,但是无奈被各位面试官打败了.等以后有时间了 一定要阅读几遍spring的 源码 有 ...
- @RequestParam加与不加的区别
最简单的两种写法,加或不加@RequestParam注解 @RequestMapping("/list") public String test(int userId) { ret ...
- 洛谷P4768 [NOI2018]归程(Kruskal重构树)
题意 直接看题目吧,不好描述 Sol 考虑暴力做法 首先预处理出从$1$到每个节点的最短路, 对于每次询问,暴力的从这个点BFS,从能走到的点里面取$min$ 考虑如何优化,这里要用到Kruskal重 ...
- openlayers3 实现测距 面积
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...