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

相关文章
|
8月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
152 0
|
前端开发
CSS pointer-events 控制鼠标事件
CSS pointer-events 控制鼠标事件
52 0
21avalon - 指令ms-hover(hover绑定)
21avalon - 指令ms-hover(hover绑定)
53 0
|
8月前
el-dialog中内容自定义滚动条
el-dialog中内容自定义滚动条
236 0
|
8月前
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
|
前端开发 JavaScript
CSS: hover选择器控制子元素的出现和隐藏
CSS: hover选择器控制子元素的出现和隐藏
108 0
|
前端开发
CSS pointer-events 鼠标事件(让标签无法点击)
CSS pointer-events 鼠标事件(让标签无法点击)
172 0
用 mouse 事件写一个可拖拽的 div
用 mouse 事件写一个可拖拽的 div
90 0
|
前端开发 容器
利用transition属性实现一个简单小巧的hover效果
原理 定位一个 初始width为0的em元素,hover的时候再将 width设置为容器的width. 再利用transiton对width变化的过程设置过度效果
149 0
|
小程序 JavaScript
小程序点击事件,添加class样式
小程序点击事件,添加class样式
626 0
小程序点击事件,添加class样式