我正在结合使用 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/
最佳答案
您需要使用 pointer-events: none;
因此,即使您悬停 :before
生成的伪内容,它也只会像悬停在普通按钮上一样表现。
.vbt_true:hover:before, .vbt_true.act:before {
background-position: -14px -31px;
pointer-events: none;
}
来自 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可用
关于html - :hover doesn't work if hovered on :before pseudo generated content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22454288/