html – ：如果在伪生成的内容之前盘旋,则悬停不起作用

概述我正在使用css的组合：before和：hover在按钮中添加图像. 我遇到的问题是,当我将鼠标悬停在：before元素上时,它会正确触发图像位置更改,但不会触发创建：before元素的li：hover. 我猜测这是因为：before元素位于li之上,然后阻止：hover被触发. 这是一张图片,可以更好地解释发生的事情： 这是我的css： .columnStat ol li { list- 我正在使用CSS的组合：before和：hover在按钮中添加图像.

我遇到的问题是,当我将鼠标悬停在：before元素上时,它会正确触发图像位置更改,但不会触发创建：before元素的li：hover.
我猜测这是因为：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,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 >            <ol>                <li ><a href="#">button Text</a>                </li>                <li ><a href="#">button Text</a>                </li>            </ol>        </div>    </div></div>

这是一个工作小提琴http://jsfiddle.net/wf_4/B42SH/

解决方法 您需要使用 pointer-events: none;,这样即使您将鼠标悬停在：生成的伪内容之前,它的行为就像您正在悬停正常按钮一样.

.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可用

总结

以上是内存溢出为你收集整理的html – ：如果在伪生成的内容之前盘旋,则悬停不起作用全部内容，希望文章能够帮你解决html – ：如果在伪生成的内容之前盘旋,则悬停不起作用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。