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

设置一下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. 《HTTP - 理解 Content-Type》

    一:引言 在此之前先看一个小例子:(html 上传文件,服务端为PHP) <?php var_dump($_FILES);?> <!DOCTYPE html> <html ...

  2. LoadRunner录制脚本-基础

    1.启动LoadRunner.没有脚本则创建脚本,有脚本则可以运行压力测试 2.点击Create/Edit Scripts,如下图,可新建或打开已有脚本 3.选择要测系统的协议 4.生成脚本分四步 5 ...

  3. 安装graphlab伤透了心,终于搞定了

    为了方便研究各种机器学习算法,我想用graphlab来辅助我对后续算法的研究.所以我的目标就是安装graphlab到我的windows笔记本中.而基于python的graphlab的安装最好是采用如下 ...

  4. 第二章 构建布局良好的windows程序

    工具箱→菜单和工具栏 菜单栏 MenuStrip的类型 MenuItem:菜单项 TextBox:文本框 ComboBoX:组合框 Separato:分割线 前面都有ToolStrip做前缀 Appl ...

  5. 前端 HTML 常用标签 head标签相关内容 meta标签

    meta标签 Meta标签介绍: <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词. <meta>标签位于文档的 ...

  6. 20190316 安装pip的一些问题

    前提条件: 1. windows环境中安装python3.7 2.注意配置环境变量 确认python.和pip都能直接在cmd 控制台使用, 一个是python命令的地址指向,一个是pip命令的地址指 ...

  7. oracle安装---yum.sh

    !#/bin/bash yum install binutils* -yyum install compat* -yyum install elfutils* -yyum install gcc* - ...

  8. Python中常用的模块

    模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...

  9. 如何在CentOS 7中安装最新Git(源码安装)

    如何在CentOS 7中安装最新Git 2017年05月20日 11:49:53 阅读数:1624 Git是在今天的软件开发行业一个非常有用的版本控制工具.我一直使用Git.于是为Linux公社的读者 ...

  10. 深入理解Lua的闭包一:概念、应用和实现原理

    本文首先通过具体的例子讲解了Lua中闭包的概念,然后总结了闭包的应用场合,最后探讨了Lua中闭包的实现原理.   闭包的概念 在Lua中,闭包(closure)是由一个函数和该函数会访问到的非局部变量 ...