关于hover和after、before合用
通常hover后面跟的选择器,都是在myClass结构之下 的dom元素。
如果想在myClass下添加after等,就需要两个::号。
注:after/before是属于myclass的下级元素,并不是同级
.myClass:hover::after{
content: '';
display: block;
background: url(../images/category_icon/forbid_red.png) no-repeat 14px 15px;
height: 30px;
width: 30px;
background-size: 15px;
}
关于hover和after、before合用的更多相关文章
- chrome控制台模拟hover、focus、active等状态,方便调试
有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...
- CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式
最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...
- 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...
- 多行图片hover加边框兼容IE7+
问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 ============================================================ ...
- jQuery中多个元素的Hover事件
1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...
- JS实现类似QQ好友头像hover时显示资料卡的效果
一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...
- 在CSS中定义a:link、a:visited、a:hover、a:active顺序
摘自:http://blog.snsgou.com/post-2.html 以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现 ...
- Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果
本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) / ...
- css实现了hover显示title的效果
<div data-title="hello, world">hello...</div> <style> div { position: re ...
随机推荐
- 第4章 Selenium2-java WebDriver API (三)
4.12 上传文件 4.12.1 sendKeys实现上传 html <html> <head> </head> <body> <div ...
- Guava初识
1. 是什么 开源Java库,提供了用于集合,缓存,支持原语,并发性,常见注解,字符串处理,I/O和验证的实用方法 2. 开发它的最初目的是什么? 方便编码,减少编码错误 3. 好处 标准化 - Gu ...
- angularjs学习第六天笔记(指令简介学习)
您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天.谢谢 接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令 ...
- EF select 匿名类 问题
连续两次被相同问题困扰. 一.举例 var query=db.StudentScore.Where(r=> r.SubjectId==subjectId).Select(g=>new {S ...
- CSS学习笔记07 盒子模型
1.盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器.每个矩形都由元素的内容.内边距(padding).边框(border)和外边距(margin)组成. ...
- Web前端基础——jQuery(二)
一.jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可 ...
- docker构建自定义镜像
docker构建自定义镜像 要构建一个镜像,第一步准备所需要的文件,第二步编写Dockerfile文件,比如我现在构建一个java web镜像 第一步:准备java web工程的war包文件(这里假设 ...
- 网页布局设计css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的 ...
- python之正则表达式及RE模块
正则表达式(匹配字符串)web界面正则匹配工具:http://tool.chinaz.com/regex/ 元字符 1 . 匹配除换行符之外的任意字符 2 \w 匹配数字字母下划线 3 \d 匹配数字 ...
- win7x64上配置 vs2015
win7 x64配置vs2015成功关键 1. 首先查看win7版本是否是sp1或以上: [计算机]----->[属性] 2. 将IE浏览器升级到IE11: IE11[百度网盘下载],提取码:[ ...