html - :hover doesn't work if hovered on :before pseudo generated content

Question

我正在结合使用 css :before 和 :hover 在按钮中添加图像。

我遇到的问题是，当我将鼠标悬停在 :before 元素上时，它会正确触发图像位置更改，但不会触发创建:before 元素。我猜这是由于 :before 元素位于 li 之上的方式造成的，这会阻止 :hover免于被触发。

这是一张图片，可以更好地解释正在发生的事情:

这是我的CSS:

.columnStat ol li {
    list-style: none;
    margin-right: 3px;
    display: inline-block;
}
ol, ul {
    list-style: none;
}

#page .columnStat ol {
    margin: 0px 8px;
    padding-top: 8px;
}

body {
    line-height: 1;
}
html, body {
    height: 100%;
}
body {
    margin: 10px 10px;
    color: rgb(35, 35, 35);
    font-family: Verdana, Helvetica, Sans-Serif;
    font-size: 0.75em;
}
a {
}
a:link {
    color: rgb(0, 102, 204);
    text-decoration: underline;
}
a:visited {
    color: rgb(0, 102, 204);
    text-decoration: none;
}
.columnStat ol > li > a, .columnStat ol > li > span {
    padding: 6px 7px 6px 20px;
    border-radius: 4px;
    border: 1px solid rgb(190, 190, 190);
    border-image: none;
    color: rgb(89, 89, 89);
    text-decoration: none;
}
.columnStat ol li a:hover{
    background-color:#7c7c7c !important;
    border:1px solid #717171;
    color:#fff;
    cursor:pointer;
    background-image:none;
}
.vbt_true:before, .vbt_false:before {
    display: inline-block;
    content: "";
    width: 15px;
    height: 28px;
    background: transparent url(http://i.stack.imgur.com/0Chc7.png) no-repeat;
    float:left;
    margin-right:-15px;
    margin-top:-4px;
    position:relative;
}
.vbt_false:before {
    background-position: 3px -1px;
}
.vbt_true:before {
    background-position: -14px -1px;
}
.vbt_false:hover:before, .vbt_false.act:before {
    background-position: 3px -31px;
}
.vbt_true:hover:before, .vbt_true.act:before {
    background-position: -14px -31px;
}

和 HTML:

<div id="containerAdmin">
    <div id="page">
        <div class="columnStat">
            <ol>
                <li class="vbt_true"><a href="#">Button Text</a>
                </li>
                <li class="vbt_false"><a href="#">Button Text</a>
                </li>
            </ol>
        </div>
    </div>
</div>

这是一个有效的 fiddle http://jsfiddle.net/wf_4/B42SH/

Answer 1

您需要使用 pointer-events: none;因此，即使您悬停 :before 生成的伪内容，它也只会像悬停在普通按钮上一样表现。

.vbt_true:hover:before, .vbt_true.act:before {
    background-position: -14px -31px;
    pointer-events: none;
}

Demo

---

来自 Mozilla Developer Network :

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

---

您可能会发现对 IE 的支持不是那么令人印象深刻(像往常一样)...

^{致谢:Mozilla 开发者网络}

---

但我们总是有polyfills可用