cursor:pointer on pseudo element IE

问题:

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;

It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).

DEMO (test in IE)

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?

Relevant code :

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

<div>some text</div>

--EDIT--

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.

回答1:

I'm really late to the game, but I just now figured out a solution to this problem.

This solution allows a pointer on the child element, while retaining a default cursor on the parent element.

(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)

First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.

Set the parent element to cursor: pointer.

Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.

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>

回答2:

I believe that it's not working in pseudo elements in IE, What I'm use to do is add cursor: ponter to main element.

If you need to add cursor: pointer to pseudo element only, than only way is to add child element

like:

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

But than is no point to using pseudo class...

demo

回答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

回答4:

demo

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>

回答5:

In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.