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

设置一下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. elasticsearch-head的安装和使用

    (一) 安装nodeJS, 下载nodejs安装包,直接下一步就可以,运行node -v 和npm -v有如下结果,表示安装成功. (二) 安装git(安装过程略过), 1.git clone git ...

  2. (3.15)mysql基础深入——mysql默认数据库/系统数据库

    (3.15)mysql基础深入——mysql默认数据库 关键词:Mysql默认数据库,mysql系统数据库 系统数据库的组成 一共4个 [1]information_schema(可以理解成字典表) ...

  3. wordpress 无法发送邮件

    前几天创建了几个wordpress项目,有些项目中用到了用户注册,但是在实际操作中发现,用户注册无法接收到认证链接,在查找了相关资料后大多归类为几个原因: 服务器本身不支持mail()函数 未配置相关 ...

  4. CentOS安装python3.5.0+uwsgi+nginx

    1安装编译工具 yum install zlib-devel bzip2-devel openssl-devel python-devel kernel-devel libffi-devel ncur ...

  5. 可快速生成增删curd改查功能的插件

    仿造Django中的admin自己实现增删改查.模糊搜索.批量操作.条件筛选.popup功能的插件 1.创建组件 首先创建一个app,这里取名为stark,在settings.py中将其进行注册 IN ...

  6. 技嘉B75-D3V主板BUG

    故障:这块B75-D3V v1.2 主板一直会报内存故障. 详细情况是:一按下主机电源键~立即报“嘀嘀嘀声...”大约半分钟然后重启,不断的循环没有人为关闭电源会一直不停的循环这个现象. 因为连着遇到 ...

  7. 类属性"get"必须声明主体,因为它未标记为 abstract 或 extern[解决方法]

    当在页面cs文件中,写类属性时,运行会碰到以下问题:CS0501: “ASP.default_aspx.Person.Level.get”必须声明主体,因为它未标记为 abstract 或 exter ...

  8. [硬件]SICK LMS111激光扫描仪使用

    1.电源接入 电源线5Pin,4芯.棕色线接入正极,蓝色线接入负极(直流电,地线).LMS111-100默认的电压范围是10-30V,推荐使用24V,我这里使用的是12V/3A的锂电池. 另外两根白色 ...

  9. Scala对class/object反射

    近期有需求,要根据解析字符串,根据字符串的内容去调用方法.想到的基本就是使用反射.但是基本上能找到的资料,全没有讲scala的反射.只有零星点点的讲解.大部分都是用scala的语法写java反射最后翻 ...

  10. 【LeetCode每天一题】Pow(x, n)(平方)

    Implement pow(x, n), which calculates x raised to the power n (x,n). Example 1:                 Inpu ...