:hover事件触发自己的:afert伪元素事件(.class:hover::after)

.toolbar-item::after {
content: "";
position: absolute;
width: 172px;
right: 46px;
bottom: -10px;
background: url(../img/toolbar_img.png) no-repeat;
opacity: 0;
transform-origin: 95% 95%;
transform: scale(0.01);
transition: all 1s;
-webkit-transition: all 1s;
}

.toolbar-item:hover::after{
opacity: 1;
transform: scale(1);
}
//或者选择器可以写成 .toolbar-item:hover.toolbar-item::after{}
//注意.hover和.toolbar-item::after之间没有空格

时间: 2024-08-03 14:09:44

:hover事件触发自己的:afert伪元素事件(.class:hover::after)的相关文章

学习CSS之伪类和伪元素

css 在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素. 在CSS2.1中的选择符有: Pattern Meaning Described in section * Matche

jquery移除、绑定、触发元素事件使用示例详解

 这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下  代码如下: unbind(type [,data])     //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn').unbind(); //移除所有     对于只需要触发一次的,随后就要立即解除绑定的情况,用one()    代码如下: $('#btn').one("click",function(){.

jquery移除、绑定、触发元素事件使用示例详解_jquery

复制代码 代码如下: unbind(type [,data])     //data是要移除的函数$('#btn').unbind("click"); //移除click$('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() 复制代码 代码如下: $('#btn').one("click",function(){.......}); 触发操作trigger() 方法触发被选元素的指定事件类型. 复制代码

CSS3与页面布局学习总结(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等)

CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值.不允许负值 <color>: 设置对象的阴

【CSS进阶】伪元素的妙用--单标签之美

最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值得一看).采用单标签完成各种图案,许多图案与本文有关. 也希望觉得不错的同学顺手在我的 Github 点个 star : CSS3奇思妙想 .   正文从这里开始,本文主要讲述一下 伪元素 before 和 after 各种妙用.    :before和::before的区别 在介绍具体用法之前,简单介绍下伪

::before和::after伪元素的用法

一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:target,:not(),:focus. 常见伪元素--::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入. 所以不要用:

[ajax基础知识]js事件触发大全

js|事件触发|ajax onactivate                        当对象设置为活动元素时触发. onbeforeactivate                  对象要被设置为当前元素前立即触发. onbeforecut                       当选中区从文档中删除之前在源对象触发. onbeforedeactivate                在 activeElement 从当前对象变为父文档其它对象之前立即触发. onbeforeed

CSS教程:用伪元素控制网页表单样式

文章简介:然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎.以下是我自己搜集整理的,在Trident, Gecko, 和 WebKit浏览器引擎下面都可用的伪元素列表.在我写这篇文章的同时,发布了一些webkit的伪元素,所以现在 当开发web应用程序时,表单样式是个头疼的问题.以前,web开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式.然而,作者通过伪元素给web渲染引擎添加钩子,就可以控制表单的显示. 然而,所有这些伪元素都

CSS的伪元素:标签div:before、div:after

文章简介:CSS伪元素before.after妙用:制作时尚焦点图相框 在css标签中有这样子的标签div:before.div:after,对于before.after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处?:befor.:after是CSS的伪元素,什么是伪元素呢?伪元素用于向某些选择器设置特殊效果.我们用CSS手册可以查询到其基本的用法: E:before/E::before 设置在对象前(依据对象树的逻辑结构)发生的内容.用来和content属性一起使用 E:aft