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

设置一下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. 洛谷P3247 最小公倍数 [HNOI2016] 分块+并查集

    正解:分块+并查集 解题报告: 传送门! 真的好神仙昂QAQ,,,完全想不出来,,,还是太菜了QAQ 首先还是要说下,这题可以用K-D Tree乱搞过去(数据结构是个好东西昂,,,要多学学QAQ),但 ...

  2. python显示进度条

    当一个python任务是需要逐个处理相同的事物时(里面有循环操作,例如对一系列的文件进行处理),这时可以将处理的进度条加进来,下面是一个例子: import time import sys def v ...

  3. ios 10 新特性

    UITextField添加了textContentType枚举,指示文本输入区域所期望的语义意义. 使用此属性可以给键盘和系统信息,关于用户输入的内容的预期的语义意义. 当您提供有关您期望用户在文本输 ...

  4. 【托业】【新托业TOEIC新题型真题】学习笔记11-题库六-P7

    1.scam [skæm] n.骗局; 诡计; <美俚>诓骗; 故事;vt.欺诈; 诓骗; 2.interpersonal adj.人与人之间的; 人际的; 人与人之间的关系的; 涉及人与 ...

  5. finecms指定从第几篇文章开始调用5条记录,并调用文章所在栏目

    我们在建站时可能会有具体的要求,比如从第几篇文章开始调用5篇,finecms如何实现呢?用下面一段代码就能完成:num=0,5表示从第一篇开始调用5篇,注意,0代表第一,5表示调用5篇: <a ...

  6. python创建有序字典及字典按照值的大小进行排序

    有序字典 在Python中,字典类型里面的元素默认是无序的,但是我们也可以通过collections模块创建有序字典 # -*- coding:utf-8 -*- # python有序字典需导入模块c ...

  7. 常见Chrome 插件

    Chrome插件网:http://chromecj.com/downloadstart.html Chrome浏览器:http://chromecj.com/chrome/2014-09/177.ht ...

  8. RN-TextInput组件去掉下划线

    <View style={styles.container}> <TextInput style={styles.textInputStyle} underlineColorAndr ...

  9. vue/cli3 配置vux

    安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...

  10. 【LNMP】提示Nginx PHP “No input file specified”错误的解决办法

    原理: 任何对.php文件的请求,都简单地交给php-cgi去处理,但没有验证该php文件是否存在. PHP文件不存在,没办法返回普通的404错误,它返回 一个404,并带上一句”No input f ...