cursor:伪元素IE上的指针

Question

我正在使用CSS在包含文本的元素上实现一个关闭按钮.关闭按钮是从伪元素生成的内容content:'X';.我需要光标成为"X"上的指针,所以我使用:

cursor:pointer;

它在Chrome和Firefox中运行良好,但它似乎不适用于Internet Explorer(在IE11 Windows 7上进行测试).

演示 (在IE中测试)

我也尝试过,cursor:hand;但它没有解决问题.如何在将光标悬停在"X"上而不是div的文本上时将光标设为指针？

相关代码:

div{
    font-size:2em;
    position:relative;
    display:inline-block;
}
div::before{
    content:'X';
    cursor:pointer;
    display:block;
    text-align:right;
}

<div>some text</div>

- 编辑 -

我知道在标记中创建一个子项或兄弟并应用cursor:pointer;它会起作用,但我想最小化标记并使用伪元素作为关闭按钮,因为它没有语义值.

Answer 1

我玩游戏的时候已经很晚了,但我刚刚想出了解决这个问题的方法.

此解决方案允许子元素上的指针,同时在父元素上保留默认光标.

(请参阅此处接受的答案,以获得不包括保持父元素的游标默认的解决方案:cursor:pointer不起作用:在元素之后？)

首先,对于这个hacky解决方案,您必须放弃使用鼠标与父元素交互的能力.

将父元素设置为cursor: pointer.

然后,将父元素设置为pointer-events: none将允许您"单击/悬停"父元素.

然后,对于伪元素,只需重新启用指针事件pointer-events: auto.

瞧!

div{
    font-size:2em;
    position:relative;
    display:inline-block;
    
    /* remove ability to interact with parent element */
    pointer-events: none;

    /* apply pointer cursor to parent element */
    cursor:pointer;

    /* make it more obvious which is child and which parent for example*/
    background: darkred;
}
div::before{
    content:'X';

    display:block;
    text-align:right;

    /* restore ability to interact with child element */
    pointer-events: auto;        

    /* make it more obvious which is child and which parent for example*/
    width: 30px;
    text-align: center;
    background: white;
}

<div>some text</div>