CSS按钮悬浮样式变化

html-css020

CSS按钮悬浮样式变化,第1张

用background-position去取背景图片的坐标 a{background:url(

?t=1315462873338) no-repeat -6px -3pxdisplay:blockwidth:79pxheight:33pxtext-indent:-9999px}a:hover{background-position:-87px -3px}登陆

不想让按钮遮住内容的话,可以给内容这层div添加如:

margin-bottom

:100px

或者

padding-bottom:100px,这个像素值>=按钮

栏的高度

背景: 最近做的页面原本有一个点赞悬浮按钮,但是在不同分辨率的移动设备屏幕上,后边的文字显示位置不固定,有的会被悬浮按钮挡住。所以加了一个拖拽功能。

参考解决办法:   狗尾草-Vue拖拽组件

遇到问题及解决:

1.unable to preventDefault inside passive event listener due to taeget being treated as passive

原因是为了滚动顺滑,touchmove等事件会被浏览器默认设置为passive:true,需要手动设置成false。参考: Unable to preventDefault inside passive event listener 。文中提到的两种办法,第一种可以,第二种css办法试了无效(可能是设置的位置不对?)

2.拖拽之后,被拖拽的组件大小会改变

我是只需要y轴拖拽,拖拽后空间的高度改变了,拖过的路径都变成了div的高度,再点击之前组件挡住的地方,会出现点击到组件的效果。解决办法是设置组件height属性。

3.设置tansition后拖拽“不动”

网上看的一个例子里边加了transition,可能是想让效果平滑一些,但是却有一种拖不动的感觉。当时以为是拖拽功能实现的有问题,于是删了换了上边链接里的方法,拖拽get√。然后试着加了一下transition,又出现了阻塞。所以这里应该是不适合用transition属性的,而且不用也挺平滑的。

学习总结:

拖拽功能的实现,主要是通过监听鼠标事件,计算各种数值,不断调整组件的位置。因此,需要复习的知识点是鼠标事件,各种尺寸数据及之间的关系。存在的不足是,虽然发现了问题并解决了,但还是不知道问题原理层面的原因。知其然,不知其所以然,希望之后能把这块补充起来。