如何使用 CSS 或 jQuery 将悬停效果应用于伪元素？

伪元素的悬停效果

查询

我们有以下 HTML 设置：

<div>
<p>以及相应的CSS:</p>
<pre class="brush:php;toolbar:false">#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;
}

问题是，我们如何仅使用 CSS 或 jQuery 将悬停效果应用于伪元素？此外，伪元素可以对另一个元素上的悬停效果做出反应吗？

答案

仅限 CSS：

更改伪元素基于使用 CSS 的父级悬停，我们可以执行以下操作：

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

JQuery:

$("#button").hover(function() {
    $(this).find(":before").css("background-color", "red");
}, function() {
    $(this).find(":before").css("background-color", "blue");
});