css - 如何为伪元素制作悬停效果？

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

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

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>