昨天写样式遇到个问题,如何让鼠标悬浮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. 分页Sql语句

    第一种 Top剔除法.去除Top (pageIndex-1)*PageSize * FROM dbo.SBD_EXCHANGE_BILL ) EB_ID FROM dbo.SBD_EXCHANGE_B ...

  2. 【CSS】小妙招,各种问题总结方法处理

    1.实现div文字溢出自动省略号截取   overflow:hidden;  /*超过部分不显示*/   text-overflow:ellipsis;  /*超过部分用点点表示*/   white- ...

  3. Java线程池 Executor框架概述

    线程池的意义 循环利用线程资源,避免重复创建和销毁线程 线程池的任务是异步执行的,只要提交完成就能快速返回,可以提高应用响应性 Java线程池还有一个很重要的意义:Java线程池就是JDK 5 推出的 ...

  4. 【Java深入研究】10、红黑树

    一.红黑树介绍 红黑树是二叉查找树,红黑树的时间复杂度为: O(lgn) 红黑树的特性:(1)每个节点或者是黑色,或者是红色.(2)根节点是黑色.(3)每个叶子节点(NIL)是黑色. [注意:这里叶子 ...

  5. MapperFacade自动导入失败

    MapperFacade自动导入失败 添加以下代码并且保证项目可以扫描到: @Configuration public class OrikaConfig { @Bean public MapperF ...

  6. 【Web前端】用CSS3实现弹幕

    初版 用css3来实现弹幕确实比较简单,只需要设置动画让弹幕从屏幕右侧移动到屏幕左侧即可,一开始是这样实现的 .danmu { position: fixed; left: %; animation: ...

  7. 课程作业——Python基础之使用turtle库画出红旗

    代码如下: import turtle # 设置画笔和背景颜色 turtle.color('yellow') turtle.bgcolor('red') # 通过偏移量和尺寸大小画星星 def dra ...

  8. JavaScript学习备忘

    1.您只能在 HTML 输出流中使用 document.write 如果在文档已加载后使用它(比如在函数中),会覆盖整个文档 2.数组 : [40, 100, 1, 5, 25, 10] <== ...

  9. Sql 判断函数是否存在、sql判断表是否存在、sql判断存储过程是否存在、sql判断视图是否存在

    --数据库是否存在 IF exists(SELECT * FROM master..sysdatabases WHERE name=N'库名') PRINT 'exists' ELSE PRINT ' ...

  10. 二进制安装 kubernetes 1.12(二) - 安装docker, 部署Flannel网络

    在 node 节点上安装 docker 参考 https://www.cnblogs.com/klvchen/p/8468855.html Flannel 工作原理: 部署Flannel网络 在 ma ...