: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 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
284 56
|
人工智能
AI大模型初体验
为了实现真正的A,需不断学习以提升能力。
361 3
AI大模型初体验
|
机器学习/深度学习 物联网 异构计算
ExVideo+CogVideoX,更长、更优!再次升级的开源视频生成能力
DiffSynth-Studio 再次为 CogVideoX 带来新的增强模块——ExVideo-CogVideoX-LoRA-129f-v1
|
XML Java Android开发
34. 【Android教程】菜单:Menu
34. 【Android教程】菜单:Menu
597 2
|
监控 Linux Shell
Rsync 基于 SSH 同步
Rsync 实时同步配置
421 3
|
小程序 Java 测试技术
基于Java充电桩综合管理系统设计和实现(源码+LW+调试文档+讲解等)
基于Java充电桩综合管理系统设计和实现(源码+LW+调试文档+讲解等)
|
机器学习/深度学习 网络协议 算法
IGP高级特性(一)
IGP高级特性(一)
|
缓存 监控 Linux
深入了解Linux的`lscpu`命令:你的CPU信息专家
`lscpu`是Linux下的命令行工具,用于获取CPU详细信息,如架构、核心、线程、缓存和型号。它从系统文件读取数据,提供实时信息,支持多种输出格式,如扩展视图、解析格式。常用参数包括显示所有CPU (`-a`)、在线CPU (`-b`) 和可解析格式 (`--parseable`)。结合其他工具,`lscpu`在系统管理和性能调优中十分有用。
|
Java Maven
thymeleaf的maven依赖
thymeleaf的maven依赖
|
前端开发 JavaScript
element组件的属性、事件和方法怎么使用
我们在使用element组件的时候,经常会使用到组件的属性、事件和方法,但对于第一次接触element组件的小白来说,由于没有代码示例,所以不知道怎么使用组件的属性、事件和方法是很常见的情况,所以本文将教会大家怎么去使用element组件的属性、事件和方法
598 0
element组件的属性、事件和方法怎么使用