js ::after简单实战

::after的作用是在元素后面再加个XXX样式

工作中遇到了一个表格,鼠标指到单元格要有个整行编辑态的效果,下面写个简单的demo

有人可能会说了,直接修改某个单元格的hover样式不就行了嘛,问题是如果鼠标指到单元格和单元格直接的空隙处,比如上图箭头处,就不会触发样式了,下面再贴下简单的代码:

javascript 复制代码
<div class="container">
  <div class="div-hover">Kang1</div>
  <div class="div-hover">Kang2</div>
  <div class="div-hover">Kang3</div>
</div>

.container {
  display: flex;
  &:hover {
    .div-hover::after {
      display: block;
    }
  }
}
.div-hover {
  position: relative;
  width: 100px;
  height: 24px;
  margin: 0 20px 0 0;

  &::after {
    content: "";
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    border: 1px solid black;
    border-radius: 4px;
    pointer-events: none;
  }
}
相关推荐
知识分享小能手8 分钟前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
林恒smileZAZ15 分钟前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3
大杯咖啡22 分钟前
一篇文章搞懂,浏览器强缓存以及协商缓存
前端·javascript
王六岁23 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南: Python 元组和映射类型深入指南
前端·javascript·python
_志哥_26 分钟前
多行文本超出,中间显示省略号的终极方法(适配多语言)
前端·javascript·vue.js
王六岁27 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南:常用的数据类型和列表
前端·javascript·python
1_2_3_28 分钟前
神级JS API,谁用谁好用
前端·javascript
用户66006766853934 分钟前
从送花表白实例读懂 JavaScript 对象字面量与代理模式
javascript
我是日安36 分钟前
从零到一打造 Vue3 响应式系统 Day 29 - readonly:数据保护实现
前端·javascript·vue.js
时代拖油瓶36 分钟前
我劝你必须知道——Intl.Segmenter
前端·javascript