Html 如何使用CSS为具有：after和：before属性的工件编写悬停属性？

我用css的after和before属性制作了一个六边形，现在我正在尝试在六边形周围创建一个光晕，在悬停时，它非常适合工件的中心，但不适合六边形（顶部和底部工件）的点：after和：before

.hexagon1{
位置：绝对位置；
左：50%；
转换：翻译（-50%）；
宽度：106px；
高度：61.20px；
背景色：#02cd68；
利润率：30.60px0；
顶部：44px；
光标：指针；
过渡：框阴影0.2s缓进缓出；
}
.六边形1：悬停{
盒影：0px 0px 40px#02cd68；
}
.六边形1:之前，
.hexagon1:之后{
内容：“；
位置：绝对位置；
宽度：0；
左边框：53px实心透明；
右边框：53px实心透明；
}
.hexagon1:之前{
底部：100%；
边框底部：30.60px固体#02cd68；
过渡：框阴影0.2s缓进缓出；
}
.hexagon1:之后{
最高：100%；
宽度：0；
边框顶部：30.60px固体#02cd68；
过渡：框阴影0.2s缓进缓出；
}

---

组合

后

，

前

和

悬停

，如下代码所示：

.hexagon1:hover:before {
//...
}

.hexagon1:hover:after {
//...
}

但你的问题有点不同。我在网上搜索过，但找不到合适的解决办法。以下是我的解决方案：

• 创建两个六边形（一个应该比另一个大，以被视为阴影）
• 使用

  z-index

• 在前面悬停之前，不要显示后面的六边形

---

下面是链接：

如果您不太关心浏览器支持（），可以切换

框阴影：0px 0px 40px#02cd68在
.hexagon1上：悬停到
过滤器：放置阴影（0px 0px 40px#02cd68）。前沿CSS功能强大。哇，朋友！聪明的解决方法！你说得对！这是一个很好的方法！谢谢@卡恩布拉克森纳