昨天写样式遇到个问题,如何让鼠标悬浮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外的按钮的更多相关文章

  1. 利用JS做到隐藏div和显示div

    div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById( ...

  2. ZedGraph的曲线的LineItem对象的Tag属性存储信息进而在鼠标悬浮时进行显示

    场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...

  3. css鼠标悬浮控制元素隐藏与显示

    在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图 当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...

  4. js:鼠标移动到文字显示div,移出文字div显示,鼠标能移进div

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. 鼠标点击DIV后,DIV的背景变色(js)

    <!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...

  6. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  7. CSS 鼠标选中文字后改变背景色的实现代码

    废话不多说,直接上代码 ::-moz-selection{background:#93C; color:#FCF;} ::selection {background:#93C; color:#FCF; ...

  8. IE 选择文字后 显示小箭头 加速按钮

    IE - 工具 - Internet选项 - 高级 - 不选择<在选择是显示加速按钮>选项就可以了.

  9. JavaScript在div后添加删除div

    var idd = 'str'; $('.task-done-detail-content-p7').click(function () { var id = this.id; if(idd !== ...

随机推荐

  1. golang使用chrome headless获取网页内容

    如今动态渲染的页面越来越多,爬虫们或多或少都需要用到headless browser来渲染待爬取的页面. 而最近广泛使用的headless browser解决方案PhantomJS已经宣布不再继续维护 ...

  2. AngularJS_自定义控件_笔记1

    简介: 本篇博客是在学习AngularJS自定义控件的学习记录,作为一个学习示例... A-基本架构介绍 新建一个AngularJs的项目,大概项目结构如下: 项目结构: 大概是由:app.js,bo ...

  3. popupWindow设置后完美解决返回键响应无效的方案以及popupWindow背景透明方案

    // 点击其他地方消失 viewPuwAddNew.setOnTouchListener(new OnTouchListener() { @Override public boolean onTouc ...

  4. SQL 查看SQL语句的执行时间 直接有效的方法

    在MSSQL Server中通过查看SQL语句执行所用的时间,来衡量SQL语句的性能. 通过设置STATISTICS我们可以查看执行SQL时的系统情况.选项有PROFILE,IO ,TIME.介绍如下 ...

  5. 2018-12-09 疑似bug_中文代码示例之Programming in Scala笔记第九十章

    续前文: 中文代码示例之Programming in Scala笔记第七八章 源文档库: program-in-chinese/Programming_in_Scala_study_notes_zh ...

  6. PlugNT CMS v4.6.3 调用文章上一页和下一页及点击数加1

    using System; using System.Data; using System.Web; using System.Web.UI; using System.Web.UI.WebContr ...

  7. 7.Odoo产品分析 (二) – 商业板块(3) –CRM(1)

    查看Odoo产品分析系列--目录 CMR:Customer Relationship Management.企业为提高核心竞争力,利用相应的信息技术以及互联网技术协调企业与顾客间在销售.营销和服务上的 ...

  8. tornado 模板引擎

    在tornado的模板引擎中,有两种方式,UImethod与UImodule 自定义方法 在模板中调用方法: tornado:与Django一样使用{{}},但是对于for循环之类,Django以{% ...

  9. 虚拟现实的头戴式设备的视野(FOV)原理

    本文原址https://www.cnblogs.com/zhangmiao14/p/5836664.html. 对于VR,它做得最好的就是它对生活的变化,有一些关键因素需要调整的恰如其分.如果做得正确 ...

  10. Floyd算法_MATLAB

    %求图中任意两点之间的最短距离与最短路径 %floyd算法通用程序,输入a为赋权邻接矩阵 %输出为距离矩阵D,和最短路径矩阵path function D=floyd(a) n=size(a,);%行 ...