如何对伪元素进行悬停效果？

Question

我有一个这样的设置：

<div id="button">Button</div>

这对于CSS：

#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

有没有办法让伪元素的悬浮效果，例如#button:before:hover {...}，是它也可能得到伪元素悬停在回答另一个元素被那幅像这样：#button:hover #button:before {...}？CSS只会很好，但jQuery也可以。

Answer 1

您可以根据父对象的悬停更改伪元素：

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:hover:before {
    background-color: red;
}



#button {    display: block;

    height: 25px;

    margin: 0 10px;

    padding: 10px;

    text-indent: 20px;

    width: 12%;}



#button:before { background-color: blue;

    content: "";

    display: block;

    height: 25px;

    width: 25px;}



#button:hover:before { background-color: red;}


<div id="button">Button</div>