通常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. SpringBoot入门之基于注解的Mybatis

    今天学习下SpringBoot集成mybatis,集成mybatis一般有两种方式,一个是基于注解的一个是基于xml配置的.今天先了解下基于注解的mybatis集成. 一.引入依赖项 因为是mybat ...

  2. SQL 行列转换数据转换为字符串

    行列转换,将列数据转换为字符串输出 ) SET @center_JZHW = ( SELECT DISTINCT STUFF( ( SELECT ',' + ce_code FROM ap_cente ...

  3. angularjs学习第六天笔记(指令简介学习)

    您好,由于周末有事情,没哟学习angularjs,几天晚上开始继续学习angularjs,坚持加油每一天.谢谢 接着上周五学习了表单验证以后,今天开始学习angularjs中一个非常重要的模块:指令 ...

  4. Nginx 500错误总结

    Nginx 500错误总结 500(服务器内部错误) 服务器遇到错误,无法完成请求. 501(尚未实施) 服务器不具备完成请求的功能.例如,当服务器无法识别请求方法时,服务器可能会返回此代码. 502 ...

  5. 通过IEnumerable接口遍历数据

    使用IEnumerable接口遍历数据,这在项目中会经常的用到,这个类型呢主要是一个枚举器. 1.首先需要让该类型实现一个名字叫IEnumerable的接口,实现该接口的主要目的是为了让当前类型中增加 ...

  6. 使用idea创建一个maven工程

    使用idea创建一个maven工程 一.创建maven工程 二.输入工程名 三.指定maven仓库 四.点击finish 五.修改工程结构(file->project structure) 六. ...

  7. thinkphp去掉url中的.html后缀

  8. linux学习笔记-开机流程与主引导分区(MBR)

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 读鸟哥的linux私房菜-基础学习篇(第三版)3.2.4章节作此笔记 一.术语介绍: Bios:写入到主板上的一个程序,计算机开 ...

  9. 集合类--最详细的面试宝典--看这篇就够用了(java 1.8)

    看了一个星期源码,搜索上百篇博文,终于总结出了集合类的所有基础知识点,学集合,看这篇就够用了!!! 篇幅有点长, 如果你能全部理解,java最重要的集合就不怕了,秒过面试!!!(本篇素材来自网络,如有 ...

  10. 洛谷P2178 [NOI2015]品酒大会(后缀自动机 线段树)

    题意 题目链接 Sol 说一个后缀自动机+线段树的无脑做法 首先建出SAM,然后对parent树进行dp,维护最大次大值,最小次小值 显然一个串能更新答案的区间是\([len_{fa_{x}} + 1 ...