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;应用于它会起作用，但我想最小化标记并使用伪元素作为关闭按钮，因为它没有语义值。 / p>

Answer 1

我现在已经很晚了，但我现在才找到解决这个问题的方法。

此解决方案允许在子元素上使用指针，而在父元素上保留默认光标。

（请参阅此处接受的答案，了解不包括保留父元素的游标默认值的解决方案：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>

Answer 2

我相信它不适用于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 3

<强> 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 4

演示

＆＃13;

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;
}

＆＃13;

<div>
    some text
</div>

＆＃13;

Answer 5

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

cursor：伪元素IE上的指针

5 个答案: