昨天写样式遇到个问题,如何让鼠标悬浮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. [转]VirtualBox centos7扩容

    本文转自:https://www.cnblogs.com/xd502djj/p/7367704.html 有时候扩容还真不如重新建立一个大硬盘的系统,但是如果你安装了好多东西的话,那还是来扩容一下吧. ...

  2. [转]简单科普私钥、地址、助记词、Keystore的区别

    本文转自:https://www.jianshu.com/p/d0a4a44685d3 很多人保管不好自己的虚拟财产,发生丢币的情况,很多都是因为不清楚私钥的概念. 私钥(Private Key) 比 ...

  3. 【转载】C#生成图片的缩略图

    图片处理是C#程序开发中时常会涉及到的一个业务,除了图像的上传.保存以及下载等功能外,根据上传的图片生成一个缩略图也是常见业务,在C#语言中,可以通过Image类提供的相关方法对图片进行操作,如指定宽 ...

  4. laravel5.5 Syntax error or access violation: 1071 Specified key was too long

    在laravel5.5执行数据迁移时 php artisan migrate 先说下系统环境: ubutun Ubuntu 16.04.3 LTS mysql:5.6.35-log 经查自Larave ...

  5. Java基础IO流(五)RandomAccessFile

    RandomAccessFile java提供的对文件内容的访问,既可以读文件也可以写文件.RandomAccessFile支持随机访问文件,可以访问文件的任意位置 (1)java文件模型:    在 ...

  6. Hibernate入门(五)---------事务管理

    在Hibernate中,可以通过代码来操作管理事务,如通过“Transaction tx = session.beginTransaction()”,开启一个事务,持久化操作后,通过"tx. ...

  7. phpcms有二级导航并且高亮效果代码

    <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul ...

  8. 如何用ABP框架快速完成项目(7) - 用ABP一个人快速完成项目(3) - 通过微服务模式而不是盖楼式来避免难度升级和奥卡姆剃刀原理

    这节文章十分重要!十分重要!十分重要!   很多同学在使用ABP的过程中遇到很多问题, 花费了很多时间和精力都还无法解决, 就是卡在这节文章这里.   Talk is cheap, just show ...

  9. Android为TV端助力 关于线程的那些事

    今天发现之前自己一直有个误区,new Runnable(run()方法){}原来它不是一定创建一个线程 如果用主线程的handler去post(Runnable),他就不会创建子线程,而是在主线程上执 ...

  10. <API自动化测试>Centos-Newman

    一.介绍: 在测试和开发中,有一款API测试工具一直占据着武林盟主的地位,那就是声名远播的Google公司的Postman. Postman原先是Chrome浏览器的一个插件,后面发展成了一个应用程序 ...