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

简介: :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之间没有空格

相关文章
|
7月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
119 0
Element-ui 表格(Table)组件中鼠标悬停(hover)样式修改
Element-ui 表格(Table)组件中鼠标悬停(hover)样式修改
2924 0
|
5月前
|
前端开发
CSS 实现动态显示隐藏(:checked 和 :target 的妙用)
CSS 实现动态显示隐藏(:checked 和 :target 的妙用)
33 0
21avalon - 指令ms-hover(hover绑定)
21avalon - 指令ms-hover(hover绑定)
45 0
|
7月前
|
前端开发 小程序
css div添加滚动条(附加源码)
css div添加滚动条(附加源码)
88 0
|
XML 前端开发 小程序
css实例(一)鼠标hover下拉菜单
红框标注位置,有一个小尖尖角,这个使用样式是这样实现的。 css 复制代码
159 0
|
前端开发 JavaScript
CSS: hover选择器控制子元素的出现和隐藏
CSS: hover选择器控制子元素的出现和隐藏
98 0
|
前端开发
禁用div元素 —— css静止点击事件
禁用div元素 —— css静止点击事件
73 0
|
前端开发
CSS pointer-events 鼠标事件(让标签无法点击)
CSS pointer-events 鼠标事件(让标签无法点击)
149 0
|
前端开发
css实现3D弹性按钮以及box-shadow特性说明
css实现3D弹性按钮以及box-shadow特性说明
156 0