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/
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With