光标：伪元素 IE 上的指针

Question

我正在一个包含 CSS 文本的元素上实现一个关闭按钮。关闭按钮是从带有content:'X'; 的伪元素生成的内容。我需要光标成为那个“X”上的指针，所以我使用了：

cursor:pointer;

它在 Chrome 和 Firefox 中运行良好，但在 Internet Explorer 中似乎无法运行（在 IE11 windows 7 上测试）。

DEMO （在 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

我相信它不适用于 IE 的伪元素， 我用来做的是将cursor: ponter 添加到主元素。

如果你只需要在伪元素中添加cursor: pointer，那么唯一的方法就是添加子元素

喜欢：

<div><span></span>some text</div>

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

但是比使用伪类没有意义......

demo

Answer 2

HTML：

 <div>
        <div id="closebutton">
            X
        </div>
        some text
    </div>

css：

div{
    font-size:2em;
    position:relative;
    display:inline-block;
}
div#closebutton{
    cursor:pointer;
    display:block;
    text-align:right;
}

DEMO

Answer 3

为了让 IE 7、8、9、10 表现得像可以处理伪选择器的常规浏览器，我总是使用 IE7.js，这是一个 JavaScript 库，可以让 Microsoft Internet Explorer 表现得像一个符合标准的浏览器。它修复了许多与 Internet Explorer 相关的 HTML 和 CSS 问题。一个替代方案是modernizr.js，它是让伪选择器与IE一起工作的一个很好的实现。我希望，这会有所帮助。

Answer 4

演示

div{
    font-size:2em;
    position:relative;
    display:inline-block;
    border:1px solid #000;
    margin:20px;
    padding:20px;
}
div:after{
    cursor:pointer;
    display:block;
    position:absolute;
    height:20px;
    width:20px;
    top:-10px;
    right:-10px;
    content:'X';
    font-size:15px;
}

<div>
    some text
</div>

Answer 5

我真的来晚了，但我刚刚想出了解决这个问题的方法。

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

（有关不包括保持父元素光标默认的解决方案，请参阅此处接受的答案：cursor: pointer doesn't work on :after element?）

首先，对于这个 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>