通常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. JavaWeb学习 (七)————HttpServletResponse对象(一)

    一.HttpServletResponse对象介绍

  2. JavaWeb学习（二）———Tomcat服务器学习和使用(一)

    一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...

  3. U3D GameObject 解读

    GameObject本身没有功能,是Unity场景里所有组件的基类,但很多时候我们需要在脚本中操作GameObject.先讲一下GameObject类包含哪些内容,其中常用的用红色标出了 Variab ...

  4. InnoDB存储引擎概览

    InnoDB存储引擎概览   InnoDB存储引擎以其平衡了高可靠性和高性能性而闻名遐迩,在MySQL 8.0版本中,InnoDB存储引擎是默认的存储引擎.(历史追溯从MySQL 5.5.5版本开始, ...

  5. (转）Visual Studio 2013新功能预览：增代码的透明度和可追溯性

    微软打破了Visual Studio两年升级一次的传统,Visual Studio 2012发布还不足一年,微软就计划发布了Visual Studio 2013了.在今天的TechEd大会上,微软宣布 ...

  6. [android] 手机卫士欢迎页检测更新

    客户端:去服务器获取最新的版本信息 服务器端: 版本信息,最新的版本2.0 最新版本的下载地址:http://xxxxxxxx/mobilesafe2.0.apk 版本的描述信息 客户端如果不升级新版 ...

  7. InheritParasitic.js

    // 寄生式继承 // 其基本思路是类似创建对象时的工厂模式,将继承过程封装在一个函数里,然后返回一个对象 function createObject(o){ var clone = Object.c ...

  8. 不固定个数组，进行一一对应的组合,js将多个数组实现排列组合

    var arr = [ ["a", "b"], ["1", "2"], ["d"] ]; var s ...

  9. FullCalendar – jQuery Event Calendar in ASP.NET

    https://github.com/esausilva/ASP.Net-EventCalendar http://trentrichardson.com/examples/timepicker/ h ...

  10. 小tips：JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

    在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法. JSON.stringify(obj)将JSO ...