cursor:指针不起作用:在元素之后?

时间:2021-12-14 19:56:42

I'm viewing the below example in Chrome and can't seem to get cursor: pointer to work on the :after element of li. Is there a way to get around this?

我在Chrome中查看以下示例,似乎无法获取光标:指针在li的元素之后工作。有办法解决这个问题吗?

http://jsfiddle.net/qKMPQ/2/

http://jsfiddle.net/qKMPQ/2/

1 个解决方案

#1


28  

Instead of setting the cursor: pointer on the :after element, set it on the entire li and it will show up on both.

而不是在:after元素上设置光标:指针,将其设置在整个li上,它将显示在两者上。

Edit:
For those of you trying to have different cursors on the li and its :after pseudo-element, you simply need to explicitly define the cursor property of the content inside the li. See this updated fiddle: http://jsfiddle.net/qKMPQ/20/

编辑:对于那些尝试在li及其上使用不同游标的人:在伪元素之后,您只需要明确定义li内容的游标属性。看到这个更新的小提琴:http://jsfiddle.net/qKMPQ/20/

<ul>
    <li>
        <a href="#"></a>
    </li>
</ul>
ul { list-style-type: none; }
li { cursor: pointer; }
a {
    background: red;
    float: left;
    width: 100px;
    height: 100px;
    cursor: help;
    display: block; }
li:after {
    content: "";
    background: yellow;
    float: left;
    width: 100px;
    height: 100px;
    display: block; }

#1


28  

Instead of setting the cursor: pointer on the :after element, set it on the entire li and it will show up on both.

而不是在:after元素上设置光标:指针,将其设置在整个li上,它将显示在两者上。

Edit:
For those of you trying to have different cursors on the li and its :after pseudo-element, you simply need to explicitly define the cursor property of the content inside the li. See this updated fiddle: http://jsfiddle.net/qKMPQ/20/

编辑:对于那些尝试在li及其上使用不同游标的人:在伪元素之后,您只需要明确定义li内容的游标属性。看到这个更新的小提琴:http://jsfiddle.net/qKMPQ/20/

<ul>
    <li>
        <a href="#"></a>
    </li>
</ul>
ul { list-style-type: none; }
li { cursor: pointer; }
a {
    background: red;
    float: left;
    width: 100px;
    height: 100px;
    cursor: help;
    display: block; }
li:after {
    content: "";
    background: yellow;
    float: left;
    width: 100px;
    height: 100px;
    display: block; }