Question

我有一个使用css之后和之前使用的六边形，现在我正在尝试在悬停时在六边形周围创建一个发光，适用于作品的中心，但不适用于六边形的点（顶部和底片）：之后和：之前。

.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：之后：悬停但是没有结果:(有任何建议吗？谢谢！

Answer 1

将after，before和hover合并为以下代码：

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

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

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

创建两个六边形（一个应该比另一个更大，以便被视为阴影）
使用z-index
不要显示六边形，它位于背面，直到正面悬停

以下是链接：https://jsfiddle.net/7nn5v06z/

如何用CSS编写Hover属性作为一个部分wih：after和：before properties？

1 个答案: