css 扩大点击范围
业务场景:比如某个按钮大小已经固定了,但是需求点击按钮周边就可以触发点击事件。
设置一下before属性里面的height,width就是设置你要点击的范围。
rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位。root!!!!!!!!!根节点,也就是需要扩大点击事件的html元素
例:(下面例子中的根节点是html ,它的字体大小是100px,所以根节点下面的元素所设置的rem,都是1rem=100px。)
rem的初始值是16px,也就是说在没有设置根节点的font-size的时候,1rem=16px
- .og_next{
- width:25px;
- height:50px;
- background:url(../images/btn.png) no-repeat;
- position:absolute;
- top:250px;
- z-index:;
- cursor:pointer;
- margin-left:0px;
- padding-left:-2px;
- }
- .og_next:before{
- margin-top:-250px;
- content: "";
- display: inline-block;
- height : 45rem;
- width : 2.5rem;
- }
css 扩大点击范围的更多相关文章
- CSS,点击去除虚线边框代码
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- js遍历添加栏目类添加css 再点击其它删除css
//js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).cli ...
- css 去除点击之后的虚线
链接在被点击时会出现虚线框,即使松开了也仍然存在,在有的时候显得不美观.既然不好看,那就不要它.怎样去掉呢? 方法一 IE下可使用其私有的html属性:hideFoucs,在标签的结构中加入hidef ...
- CSS实现点击事件及实践
实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...
- CSS鼠标点击式变化图片透明度
今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...
- 【css】css实现点击Toggle功能/icon切换
①实现Toggle功能 html结构: <div class="cssTog"><label> <p> 专业:B020309现代企业管理(独立本 ...
- CSS实现点击改变元素背景色
可通过使用css伪类实现点击元素变色的效果,两个伪类是:active, :focus :active :active选择器用于选择活动链接.当在一个链接上点击时,它就会成为活动的(激活的),:acti ...
- svg矢量图标在html中的使用, (知识点:1.通过h5中的css实现点击变色,2.一个svg文件包含多个图标)
svg矢量文件体积小,不变形,比传统的png先进,比现在流行的icon-font灵活.然而在使用过程中还是遇到了很多坑.今天花了一天时间把经验整理出来,以供后来者借鉴.如果您从本文收益,请留言mark ...
- 纯css实现点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 被监测teamviewer被检测出用于商业用途
一.下载teamviewer的破解程序 下载链接 这个要付几块钱,本人付过,个人下载过,可以免费传给你们,可以留下邮箱,但是不一定及时回复. 二. 解压后将.exe放到对应的软件安装目录,运行,点击f ...
- selenium如何定位同级节点
场景:当定位某个元素时,发现所需要的元素在同级节点,可以用/following-sibling::* 方法(定位同级的第二位) 当定位统计节点的第二个定位相邻节点. 可以用/preceding ...
- 两个js冲突怎么解决?试试这四个方法
两个js冲突很让前端头疼,虽然jquery是通用的,但调用不同经常会出问题.jQuery是目前流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. ...
- AppState使用
AppState使用 import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,View,AppSta ...
- kafka6 编写使用自定义分区的生产者
一 客户端 在上一篇博客创建的简单生产者的基础上,进行两个修改操作: 1.新建SimplePartitioner.java,修改返回分区为1. SimplePartitioner.java代码如下 p ...
- 并发编程---IO模型
IO模型 任务的提交方式有两种: 同步:应用程序提交完任务,等待结果结果,之后在执行下一个任务 异步:应用程序提交完任务,继续执行不等待结果,任务执行完,会自动出发异步中的会带哦函数 同步不等于阻塞: ...
- 如何给EOS账户设置自定义权限
https://bihu.com/article/1508858 EOS从上线以后,不断有传出token被盗的消息,安全无小事,我们一定要重视,今天从EOS帐户自己定义权限的角度来谈谈如何做好账户的安 ...
- GitHub账户注册
GitHub是一个优秀的面向开源及私有软件项目的托管平台,值得我们使用,但因为其不同于我们常见的很多平台,所以刚开始使用时,我们会遇到很多的问题.特此记录下博主自己使用GitHub的过程供自己以后查看 ...
- Python 全栈开发十一 深浅拷贝
深浅拷贝 深浅拷贝的前提: 相等和相同的关系 深浅拷贝针对的是列表等可变的数据类型. 深浅拷贝在普通的列表没有什么意义,只有在嵌套列表,或其他嵌套数据类型才有意义. a = "aaa&quo ...
- crontab-rsync
写一个shell脚本放到crontab中,该脚本利用rsync把远程同步到本地的话,需要把本地的公钥放到远程的authorized_keys:否则,手动执行脚本没问题,但是crontab执行就不会有效 ...