业务场景:比如某个按钮大小已经固定了,但是需求点击按钮周边就可以触发点击事件。

设置一下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 扩大点击范围的更多相关文章

  1. CSS,点击去除虚线边框代码

  2. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  3. js遍历添加栏目类添加css 再点击其它删除css

    //js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).cli ...

  4. css 去除点击之后的虚线

    链接在被点击时会出现虚线框,即使松开了也仍然存在,在有的时候显得不美观.既然不好看,那就不要它.怎样去掉呢? 方法一 IE下可使用其私有的html属性:hideFoucs,在标签的结构中加入hidef ...

  5. CSS实现点击事件及实践

    实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...

  6. CSS鼠标点击式变化图片透明度

    今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...

  7. 【css】css实现点击Toggle功能/icon切换

    ①实现Toggle功能 html结构: <div class="cssTog"><label> <p> 专业:B020309现代企业管理(独立本 ...

  8. CSS实现点击改变元素背景色

    可通过使用css伪类实现点击元素变色的效果,两个伪类是:active, :focus :active :active选择器用于选择活动链接.当在一个链接上点击时,它就会成为活动的(激活的),:acti ...

  9. svg矢量图标在html中的使用, (知识点:1.通过h5中的css实现点击变色,2.一个svg文件包含多个图标)

    svg矢量文件体积小,不变形,比传统的png先进,比现在流行的icon-font灵活.然而在使用过程中还是遇到了很多坑.今天花了一天时间把经验整理出来,以供后来者借鉴.如果您从本文收益,请留言mark ...

  10. 纯css实现点击事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. js 正则判断字符串下划线的长度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. python基础数据类型考试题

    Python基础数据类型考试题 考试时间:两个半小时                      满分100分(80分以上包含80分及格) 一,基础题. 1,简述变量命名规范(3分) 2,字节和位的关系 ...

  3. 集成xxl-job分布式任务调度平台

    首先声明,本篇博文基于springboot,基于spring的请自行研究. (一)启动控制平台 首先将xxl-job-master.zip下载下来,然后在mysql数据库创建xxl-job数据库. 执 ...

  4. Filter & Listener

    一 监听器的概述 监听器就是一个实现了特定接口的Java类,用于监听另一个Java类的方法调用或属性的改变.当被监听对象发生上述事件后,监听器某个方法将会立即被执行. 即用来监听其他对象的变化,主要应 ...

  5. FastList使用

    之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过Android的朋友都 ...

  6. @property用法总结

    1.当方法需要传入别的参数时,不能定义成@property. 比如_table(self, owner)

  7. abap form格式的异常处理

    1: form 中有异常时,需要用 raising 将异常抛出. *&------------------------------------------------------------- ...

  8. 惠普开源的通信测试工具Seagull的安装体会

    1. 为省事起见,先下载安装包,发现依赖库版本太低,没法运行.于是源码编译安装.主要参考:https://github.com/codeghar/Seagull,似乎http://gull.sourc ...

  9. .NET拾忆:FileSystemWatcher 文件监控

    资源: https://msdn.microsoft.com/zh-cn/library/system.io.filesystemwatcher_properties(v=vs.110).aspx F ...

  10. sqli-labs(四)

    第七关: 输入?id=1 页面显示如下,可以看出这关大概是锻炼利用sql来写入一句话木马. 这里说我下我的探测流程(主要是为了知道后台的sql是怎样拼凑的): 输入?id=1' 报错  说明后台是用的 ...