jquery – 如何使伪元素的悬停效果？

我有一个这样的设置：

<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也很好。

解决方法

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

JSFiddle DEMO

#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>