昨天写样式遇到个问题,如何让鼠标悬浮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 server 获取自增列下一个值或者获取指定表的主键值

    IDENT_CURRENT('TableName')为当前的最大标识值, IDENT_INCR('TableName')为设置的标识值增量, 两者相加即为下一个标识值 如: SELECT IDENT_ ...

  2. Windows server 2008 R2端口转发

    查询配置了转发的端口 netsh interface portproxy show v4tov4 配置转发(所有ip访问192.168.0.99的1001端口均指向1953端口) netsh inte ...

  3. springMVC_01认识springMVC

    一.   MVC作用 将url映射到java类或者java类的方法 封装用户提交的数据 处理请求,调用相关业务处理,封装响应的数据 将响应数据进行渲染 一.   SpringMVC 是一个轻量级的,基 ...

  4. FastJson序列化Json自定义返回字段,普通类从spring容器中获取bean

    前言: 数据库的字段比如:price:1 ,返回需要price:1元. 这时两种途径修改: ① 比如sql中修改或者是在实体类转json前遍历修改. ②返回json,序列化时候修改.用到的是fastj ...

  5. 【学习笔记】sklearn数据集与估计器

    数据集划分 机器学习一般的数据集会划分为两个部分: 训练数据:用于训练,构建模型 测试数据:在模型检验时使用,用于评估模型是否有效 训练数据和测试数据常用的比例一般为:70%: 30%, 80%: 2 ...

  6. Javascript继承5:如虎添翼----寄生式继承

    /* * 寄生式继承 * 其实就是对原型继承的第二次封装,在封装过程中对继承的对象进行了扩展. * 也存在原型继承的缺点!! * 这种思想的作用也是为了寄生组合式继承模式的实现. */ //声明基对象 ...

  7. 7.通用程序设计_EJ

    第45条: 将局部变量的作用域最小化 该条目与第13条(使类和成员的可访问性最小)本质上是类似的.要使局部变量的作用域最小化,最有利的方法就是在第一次使用它的地方声明.在每个局部变量的声明处都应该包含 ...

  8. 查询文章的上下篇Sql语句

    直接开入正题 文章内容页一般都会有上一篇和下一篇的功能: 那么查询上下篇的sql语句应该怎么写呢:示例数据表:zmd_article自增主键:id当前文章id:10 肯定有人说,这简单啊id+1和id ...

  9. C# 任务 数据加载不影响其他操作

    private void button1_Click(object sender, EventArgs e) { //this.timer1.Enabled = true; Task t1 = new ...

  10. vuejs-指令详解

    v-if v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中,代码如下: ...