wih：afterと：beforeプロパティのCSSにHoverプロパティを書き込む方法は？

Question

私は六角形を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で試してみた：後：ホバーが、何の結果:(任意の提案のおかげ

Answer 1

after、before、およびhover次のコードのような組み合わせがありません？！ ：

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

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

しかし、あなたの質問は少し異なります。インターネットで検索しましたが、適切な解決策が見つかりませんでした。ここに私の解決策は次のとおりです。

• は2つの六角形（一つは影のように見られるように、他のよりも大きいはずです）
• z-index
• を使用して注文して背面にある六角形、表示しないを作成します。フロントはここでホバー

上でリンクされるまで：https://jsfiddle.net/7nn5v06z/