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

设置一下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. python摸爬滚打之day03----基本数据类型(int,str,bool)

    1.数据类型转换 字符串 ----> bool print( bool("hello") )  -----> True 数字----> bool print( b ...

  2. 为什么要使用 Docker(二)

    作为一种新兴的虚拟化方式,Docker 跟传统的虚拟化方式相比具有众多的优势. 更高效的利用系统资源 由于容器不需要进行硬件虚拟以及运行完整操作系统等额外开销,Docker 对系统资源的利用率更高.无 ...

  3. 【Linux】测试环境如何搭建?

    [Linux]测试环境如何搭建? (该文档所在我的百度网盘位置: ) 通常面试会问到会不会搭建测试环境?到底啥是测试环境搭建呢,其实测试环境没有想像的那么高大上,弄个 tomcat,把测试的 war ...

  4. 原生js获取子元素、给元素增加div

    //鼠标移入移出动画 解决页面闪屏问题 window.onload = function () { var el = document.createElement('div'); el.classNa ...

  5. int(1)和int(11)是否有区别?

    MySQL类型关键字后面的括号内指定整数值的显示宽度(例如,INT(11)).该可选显示宽度规定用于显示宽度小于指定的列宽度的值时从左侧填满宽度.显示宽度并不限制可以在列内保存的值的范围,也不限制超过 ...

  6. OpenFace的一些了解

    1.OpenFace内4个样例代码 配置学习了两个 其一: Ubantu 基本命令 Docker 安装方式.发布网站方式.查看验证安装结果命令 Openface 基本demo 实现方式.和基本原理 其 ...

  7. 008-js中的正则表达式

    查看地址:http://www.runoob.com/js/js-regexp.html 一.正则表达式概述 正则表达式(英语:Regular Expression,在代码中常简写为regex.reg ...

  8. openssl生成RSA公钥和私钥对

    在ubuntu上要使用openssl的话需要先进行安装,命令如下: sudo apt-get install openssl 安装完成就可以使用openssl了. 首先需要进入openssl的交互界面 ...

  9. [redis]redis常用

    https://redis.io/topics/quickstart $ redis-cli ping PONG redis-server is the Redis Server itself. re ...

  10. [py]初始化dict结构和json.dump使用

    1.json.dump使用 http://python3-cookbook.readthedocs.io/zh_CN/latest/c06/p02_read-write_json_data.html ...