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

Question

I am using a combination of css :before and :hover to add an image in a button.

The problem that I have encountered is that when I hover over the :before element, it triggers the image position change correctly but not the li:hover which created the :before element. I am guessing this is caused because of the way in which the :before element is sitting on top of the li which then prevents the :hover from being triggered.

Here is an image to better explain what is happening:

here is my 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;
}

and the 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>

And here is a working fiddle http://jsfiddle.net/wf_4/B42SH/

Answer 1

You need to use pointer-events: none; so that even if you hover the :before generated pseudo content, it will simply behave as if you are hovering the normal button.

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

Demo

---

From 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.

---

You may find support not that impressive for IE (As usual)...

^{Credits: Mozilla Developer Network}

---

But we always have polyfills available