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屋！