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: 0;
    }    
} 
复制代码

 



本文转自 海角在眼前 博客园博客,原文链接: http://www.cnblogs.com/lovesong/p/7435127.html  ,如需转载请自行联系原作者

相关文章
|
12天前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
16 0
|
12天前
|
编解码 前端开发 UED
div+css详解
总的来说,"div+css"是一种强大的网页布局方法,它提供了灵活性和可维护性,使得网页设计师和开发人员能够创建各种各样的页面布局和风格,同时确保网站具有一致的外观和良好的用户体验。它已成为现代Web开发中的标准实践之一。
65 3
|
12天前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
18 0
|
12天前
|
前端开发 JavaScript
css 设置div阴影样式
css 设置div阴影样式
23 0
|
12天前
|
前端开发 小程序
css div添加滚动条(附加源码)
css div添加滚动条(附加源码)
17 0
|
12天前
|
前端开发
|
12天前
|
前端开发
|
12天前
|
前端开发 搜索推荐 容器
div+css的布局较table布局有什么优缺点?
div+css的布局较table布局有什么优缺点?
|
12天前
|
前端开发 JavaScript
CSS+JS鼠标事件触发鼠标模形实现手状
CSS+JS鼠标事件触发鼠标模形实现手状
N..
|
12天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
11 0