CSS电脑鼠标飘浮DIV后显示信息DIV外的按钮处理方

日期:2021-01-20 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

昨日写款式遇到个难题,怎样让电脑鼠标飘浮DIV后,显示信息DIV外的按钮,能够点一下到按钮。

实际效果以下:

难题:

在DIV hover情况下将按钮设为display: block,这是很立即的念头,可是这有个难题,便是在飘浮出現按钮后,电脑鼠标要移到按钮上全过程中,离去了DIV历经间隔时,按钮就会消退。

处理方法:

1. 挑选更大地区的DIV

这个情况下hover出現的按钮,因为电脑鼠标还在DIV(大地区)中,因此按钮是能够一切正常点到的。但这个方式难题在于扩张了开启地区,假如原意上是要最开始的DIV来开启,那这个方式就不好。

2.提升1个不能见层

如蓝色框所示,在DIV提升1个肯定精准定位的地区至按钮底下,这样在电脑鼠标移到按钮全过程中,都属于在DIV內部,按钮也就不容易消退。这个方式的益处在于,肯定适度的开启地区。

div{
    position:absolute;
    .hover-help{
        position: absolute;
        height: 20px;
        width: 26px;
        left: ⑵0px;
        bottom: 0;
    }    
} 

总结

以上所述是网编给大伙儿详细介绍的CSS电脑鼠标飘浮DIV后显示信息DIV外的按钮处理方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:10分钟了解CSS BFC基本原理及其运用 返回下一篇:没有了