css 扩大点击范围
业务场景:比如某个按钮大小已经固定了,但是需求点击按钮周边就可以触发点击事件。
设置一下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 扩大点击范围的更多相关文章
- CSS,点击去除虚线边框代码
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- js遍历添加栏目类添加css 再点击其它删除css
//js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).cli ...
- css 去除点击之后的虚线
链接在被点击时会出现虚线框,即使松开了也仍然存在,在有的时候显得不美观.既然不好看,那就不要它.怎样去掉呢? 方法一 IE下可使用其私有的html属性:hideFoucs,在标签的结构中加入hidef ...
- CSS实现点击事件及实践
实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...
- CSS鼠标点击式变化图片透明度
今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css ...
- 【css】css实现点击Toggle功能/icon切换
①实现Toggle功能 html结构: <div class="cssTog"><label> <p> 专业:B020309现代企业管理(独立本 ...
- CSS实现点击改变元素背景色
可通过使用css伪类实现点击元素变色的效果,两个伪类是:active, :focus :active :active选择器用于选择活动链接.当在一个链接上点击时,它就会成为活动的(激活的),:acti ...
- svg矢量图标在html中的使用, (知识点:1.通过h5中的css实现点击变色,2.一个svg文件包含多个图标)
svg矢量文件体积小,不变形,比传统的png先进,比现在流行的icon-font灵活.然而在使用过程中还是遇到了很多坑.今天花了一天时间把经验整理出来,以供后来者借鉴.如果您从本文收益,请留言mark ...
- 纯css实现点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 《HTTP - 理解 Content-Type》
一:引言 在此之前先看一个小例子:(html 上传文件,服务端为PHP) <?php var_dump($_FILES);?> <!DOCTYPE html> <html ...
- LoadRunner录制脚本-基础
1.启动LoadRunner.没有脚本则创建脚本,有脚本则可以运行压力测试 2.点击Create/Edit Scripts,如下图,可新建或打开已有脚本 3.选择要测系统的协议 4.生成脚本分四步 5 ...
- 安装graphlab伤透了心,终于搞定了
为了方便研究各种机器学习算法,我想用graphlab来辅助我对后续算法的研究.所以我的目标就是安装graphlab到我的windows笔记本中.而基于python的graphlab的安装最好是采用如下 ...
- 第二章 构建布局良好的windows程序
工具箱→菜单和工具栏 菜单栏 MenuStrip的类型 MenuItem:菜单项 TextBox:文本框 ComboBoX:组合框 Separato:分割线 前面都有ToolStrip做前缀 Appl ...
- 前端 HTML 常用标签 head标签相关内容 meta标签
meta标签 Meta标签介绍: <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词. <meta>标签位于文档的 ...
- 20190316 安装pip的一些问题
前提条件: 1. windows环境中安装python3.7 2.注意配置环境变量 确认python.和pip都能直接在cmd 控制台使用, 一个是python命令的地址指向,一个是pip命令的地址指 ...
- oracle安装---yum.sh
!#/bin/bash yum install binutils* -yyum install compat* -yyum install elfutils* -yyum install gcc* - ...
- Python中常用的模块
模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...
- 如何在CentOS 7中安装最新Git(源码安装)
如何在CentOS 7中安装最新Git 2017年05月20日 11:49:53 阅读数:1624 Git是在今天的软件开发行业一个非常有用的版本控制工具.我一直使用Git.于是为Linux公社的读者 ...
- 深入理解Lua的闭包一:概念、应用和实现原理
本文首先通过具体的例子讲解了Lua中闭包的概念,然后总结了闭包的应用场合,最后探讨了Lua中闭包的实现原理. 闭包的概念 在Lua中,闭包(closure)是由一个函数和该函数会访问到的非局部变量 ...