通常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合用的更多相关文章

  1. chrome控制台模拟hover、focus、active等状态，方便调试

    有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...

  2. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

  3. 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

    1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...

  4. 多行图片hover加边框兼容IE7+

    问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 ============================================================ ...

  5. jQuery中多个元素的Hover事件

    1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...

  6. JS实现类似QQ好友头像hover时显示资料卡的效果

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一 ...

  7. 在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://blog.snsgou.com/post-2.html     以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现 ...

  8. Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果

    本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) / ...

  9. css实现了hover显示title的效果

    <div data-title="hello, world">hello...</div> <style> div { position: re ...

随机推荐

  1. 【API知识】MongoTemplate非映射方式操作Document

    前言 我是MongoDB小白,刚开始学.不过,我猜大多数使用MongoDB的,都是采用映射方式处理的,即需要有定义好的用于映射的实体类.但是这样的话,如果表的结构在未来可能频繁变动,增删字段,甚至添加 ...

  2. Linux C++开发学习（一）

    一.简单输出 简单的小程序 1.安装g++ sudo install g++ 2.编写c++程序,helloworld.cpp #include<iostream> using names ...

  3. Vim——回顾整理

    一.命令练习(一) hjkl(左下上右) 保存到某路径 :saveas 路径 w 到下一个单词的开头 e 到下一个单词的结尾 % 括号匹配移动(),{},[] 0 到行头 $ 到行头 gU字母变大写 ...

  4. MVC EF 执行SQL语句（转载）

    MVC EF 执行SQL语句 最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 闲着没事,看了一篇关于LI ...

  5. 用JDOM解析XML文件时如何解决中文问题？如何解析？

    import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import ja ...

  6. MySQL学习（五） UNION与UNION ALL

    UNION用于把来自许多SELECT语句的结果组合到一个结果集合中,也叫联合查询. SELECT ... UNION [ALL | DISTINCT] SELECT ... [UNION [ALL | ...

  7. 【原】Spring AOP实现对Redis的缓存同步

    前言:刚开始采用spring cache作为缓存数据,到后面发现扩展性不灵活,于是基于sprig cache原理自定义一套规则用于缓存数据. 请求过程: 根据请求参数生成Key,后面我们会对生成Key ...

  8. java_有秒计时的数字时钟

    题目内容: 这一周的编程题是需要你在课程所给的时钟程序的基础上修改而成.但是我们并不直接给你时钟程序的代码,请根据视频自己输入时钟程序的Display和Clock类的代码,然后来做这个题目. 我们需要 ...

  9. linux学习笔记-目录结构（2）

    2./usr的意义与内容 依据FHS的基本定义,/usr里面放置的数据属于可分享的与不可变动的. usr是UNIX Software Resource的缩写,即UNIX操作系统软件资源所放置的目录,而 ...

  10. 【读书笔记】iOS-iOS开发之iOS程序偏好设置(Settings Bundle)的使用

    在Android手机上, 在某个程序里,通过按Menu键,一般都会打开这个程序的设置,而在iOS里,系统提供了一个很好的保存程序设置的机制.就是使用Settings Bundle. 在按了HOME键的 ...