Cursor: Zeiger auf Pseudoelement IE

Question

Ich implementiere eine Schließen-Schaltfläche für ein Element, das Text mit CSS enthält. Die Schaltfläche zum Schließen wird aus einem Pseudoelement mit content:'X'; generiert. Ich brauche den Cursor ein Zeiger auf diesem „X“ zu werden, so habe ich:

cursor:pointer; 

Es funktioniert gut in Chrome und Firefox, aber es scheint nicht (auf IE11 windows 7 Tests) in Internet Explorer zu arbeiten.

DEMO(Test in IE)

Ich habe auch versucht mit cursor:hand; aber es löst nicht das Problem. Wie kann ich den Cursor einen Zeiger beim Schweben des "X" aber nicht auf dem Text des div machen?

Relevante 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--

Ich bin mir bewusst, dass ein Kind oder Geschwister im Markup machen und die Anwendung cursor:pointer; zu es wird funktionieren, aber ich möchte Markup minimieren und ein Pseudo-Element für die Close-BU verwenden tton, da es keinen semantischen Wert hat.

Answer 1

Ich bin wirklich spät, um das Spiel, aber ich gerade jetzt eine Lösung für dieses Problem gelöst.

Diese Lösung ermöglicht einen Zeiger auf dem Kind-Elemente, während einen Standard-Cursor auf dem Mutterelement zu halten.

(siehe akzeptierte Antwort hier für eine Lösung, die nicht das Cursor Standard des übergeordneten Elements zu halten enthält: cursor: pointer doesn't work on :after element?)

Vor allem für diese hacky Lösung, müssen Sie die Möglichkeit geben, bis zu interagieren mit dem Elternelement mit der Maus.

Setzen Sie das übergeordnete Element auf cursor: pointer.

Wenn Sie dann das übergeordnete Element auf pointer-events: none setzen, können Sie auf das übergeordnete Element "klicken".

Aktivieren Sie dann für das Pseudoelement einfach Zeigerereignisse mit 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>

Answer 2

Ich glaube, dass es nicht funktioniert in Pseudo-Elemente in IE, Was ich zu tun habe, ist cursor: ponter zu Hauptelement hinzufügen.

Wenn Sie cursor: pointer hinzufügen nur Pseudo-Elemente, als nur Art und Weise untergeordnetes Element hinzuzufügen ist

wie:

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

Aber als kein Punkt ist, Pseudo-Klasse mit ...

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

Um IE 7,8,9,10 verhalten sich wie normale Browser zu machen, die mit Pseudo-Selektoren umgehen können, verwende ich IE7 immer. js, eine JavaScript-Bibliothek, mit der sich Microsoft Internet Explorer wie ein standardkonformer Browser verhält. Es behebt viele HTML- und CSS-Probleme im Zusammenhang mit Internet Explorer. Eine Alternative wäre modernizr.js, was eine gute Implementierung ist, um Pseudo-Selektoren zu erhalten, die mit IE arbeiten. Ich hoffe das hilft.

Answer 5

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>