我正在一个包含CSS文本的元素上关闭按钮.关闭按钮是从具有内容为’X’的伪元素生成内容的.我需要光标成为“X”的指针,所以我使用：
cursor:pointer;
它在Chrome和Firefox中正常工作,但在Internet Explorer中似乎不起作用(在IE11 Windows 7上测试).
DEMO(在IE测试)
我也用光标：手;但这并不能解决问题.悬停“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;它将工作,但我想最小化标记,并使用伪元素的关闭按钮,因为它没有语义值.
解决方法
我真的迟到了,但是我刚才想出了一个解决这个问题的办法.
该解决方案允许在子元素上指针,同时在父元素上保留默认游标.
(请参阅此处接受的解决方案,其中不包括保留父元素的游标默认值：cursor: pointer doesn’t work on :after element?)
首先,对于这个hacky解决方案,您必须放弃使用鼠标与父元素进行交互的功能.
将父元素设置为cursor：pointer.
然后,将父元素设置为指针事件：none将允许您“单击/悬停通过”父元素.
然后,对于伪元素,只需使用指针事件重新启用指针事件：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>
