Question

我使用CSS创建了一个Ribbon背景，我在其中堆叠了一个社交媒体图标。色带由两部分组成。上半部分是正方形，下半部分是“褶边”的位置。驻留。代码如下：

#facebook-icon{ 
    background-color: #7d4826;
    color: #ffffff;
    padding-top: 23px;
    padding-left: 10px;
    padding-right: 25px;
    margin-right: 5px;
}

#facebook-icon::after{
    content: "";
    position: absolute;
    padding-top: 10px;
    border-bottom: 18px solid transparent;
    border-left: 17px solid #7d4826;
    border-right: 18px solid #7d4826;
    margin-left: -10px;
}

当用户滚动图像时，我希望功能区改变颜色。为此，我插入了以下代码：

#facebook-icon:hover{
    color: #7d4826;
    background-color: lavender;
}

这仅影响功能区的上半部分。为了给下半部分提供相同的效果，我应用了以下代码：

#facebook-icon::after:hover{
    color: #7d4826;
    background-color: lavender;
}

不幸的是，这似乎不起作用。有人知道任何变通方法吗？

Answer 1

只需交换它们，所以当用户使用＃facebook-icon悬停在元素上时，你希望:: after部分也改变。如果您创建了一个plunker，我可以为您应用更改，也可以看到HTML：）

#facebook-icon:hover::after{
    color: #7d4826;
    background-color: lavender;
}

如何应用＆＃39;：hover＆＃39;元素样式到＆＃39; :: after＆＃39;元件？

1 个答案: