如何將鼠標懸停在使用偽選擇器創建的整個形狀上？

Question

我正在嘗試將陰影應用於整個形狀。 但是用 ::after 定義的形狀不受影響。 我如何將形狀作為一個單位？

樣式文件

.diag{
   position: relative;
    top: 0px;
    left: 100px;
   width: 150px;
   height: 90px;
   background-color: gray;
   border-radius: 10px;

}

.diag::after{
    content: "";
    position: absolute;
    left: -50px;
    top: 35px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 50px solid gray;
    border-bottom: 10px solid transparent;
}

 .diag:hover{
    box-shadow: 2px 2px 2px 2px;
}

Answer 1

你可以試試這個：

 .diag { position: relative; top: 0px; left: 100px; width: 150px; height: 90px; background-color: gray; border-radius: 10px; } .diag::after { content: ""; position: absolute; left: -50px; top: 35px; width: 0; height: 0; border-top: 10px solid transparent; border-right: 50px solid gray; border-bottom: 10px solid transparent; } .diag:hover { box-shadow: 0px 0px 4px 4px black; }

 <div class="diag"> </div>