html - 如何使用 CSS 为 :after and :before properties? 的片段编写悬停属性

Question

我有一个使用 after 和 before 属性与 css 制作的六边形，现在我尝试在悬停时围绕六边形创建发光，非常适合作品的中心，但不适用于六边形的点(顶部和底部部分)与 :after 和 :before。

.hexagon1 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 106px; 
  height: 61.20px;
  background-color: #02cd68;
  margin: 30.60px 0;
  top:44px;
  cursor: pointer;
  transition: box-shadow 0.2s ease-in-out;
}

.hexagon1:hover {
  box-shadow: 0px 0px 40px #02cd68;
}

.hexagon1:before,
.hexagon1:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 53px solid transparent;
  border-right: 53px solid transparent;
}

.hexagon1:before {
  bottom: 100%;
  border-bottom: 30.60px solid #02cd68;
  transition: box-shadow 0.2s ease-in-out;
}

.hexagon1:after {
  top: 100%;
  width: 0;
  border-top: 30.60px solid #02cd68;
  transition: box-shadow 0.2s ease-in-out;
}

<div class="hexagon1"></div>

我试过 .hexagon1:after:hover 但没有结果:( 有什么建议吗？谢谢!

Answer 1

将 after、before 和 hover 组合在一起，如下面的代码:

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

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

但是你的问题有点不同。我在互联网上搜索过，但找不到任何合适的解决方案。这是我的解决方案:

• 创建两个六边形(一个应该比另一个大才能被视为阴影)
• 使用 z-index 对它们进行排序
• 不显示六边形，它在后面，直到前面悬停

这是链接:https://jsfiddle.net/7nn5v06z/