cursor:伪元素IE上的指针 [英] cursor:pointer on pseudo element IE
问题描述
我正在使用CSS实现包含文本的元素的关闭按钮。关闭按钮是从 content:'X';
的伪元素生成的内容。我需要光标成为一个指针X,所以我用:
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';
. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
它在Chrome和Firefox中可以正常工作,但似乎不工作在Internet Explorer IE11 windows 7)。
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (在IE中测试)
我也尝试过 cursor:hand;
它不解决问题。如何在悬停X而不在div文本上的同时使光标变为指针?
I also tried with cursor:hand;
but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the 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;
它会工作,但我想最小化标记和使用一个伪元素的关闭按钮,因为它没有语义值。
I am aware that making a child or sibling in the markup and applying cursor:pointer;
to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
推荐答案
这个解决方案允许在子元素上使用指针,而在父元素上保留默认光标。
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(参见接受的解答,不包括保持父元素的游标默认值: cursor:pointer does not work on:after element?)
首先,对于这个hacky解决方案,你必须放弃使用鼠标与父元素交互的能力。
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
将父元素设置为 cursor:pointer
。
然后,将父元素设置为 pointer-events:none
将允许您单击/悬停父元素。
Then, setting the parent element to pointer-events: none
will allow you to "click/hover through" the parent element.
然后,对于伪元素,只需使用 pointer-events:auto
重新启用指针事件。
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto
.
Voila!
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>
这篇关于cursor:伪元素IE上的指针的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!