mano - cursor pointer color css

cursor: puntero en pseudo elemento IE

Question

Estoy implementando un botón de cierre en un elemento que contiene texto con CSS. El botón de cierre se genera contenido de un pseudo elemento con content:''X''; . Necesito que el cursor se convierta en un puntero en esa "X", así que utilicé:

cursor:pointer;

Funciona bien en Chrome y Firefox, pero no parece funcionar en Internet Explorer (prueba en IE11 Windows 7).

DEMO (prueba en IE)

También probé con el cursor:hand; Pero no resuelve el problema. ¿Cómo puedo hacer que el cursor sea un puntero mientras muevo la "X" pero no en el texto del div?

Código relevante:

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

<div>some text</div>

--EDITAR--

Soy consciente de que hacer un niño o un hermano en el marcado y aplicar el cursor:pointer; Funcionará, pero me gustaría minimizar el marcado y utilizar un pseudo elemento para el botón de cierre, ya que no tiene valor semántico.

Answer 1

Creo que no está funcionando en pseudo elementos en IE, lo que estoy cursor: ponter a hacer es agregar cursor: ponter al elemento principal.

Si necesita agregar el cursor: pointer al pseudo elemento, entonces la única forma es agregar el elemento secundario

me gusta:

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

Pero eso no tiene sentido usar pseudo clase ...

demo

Answer 2

Llego tarde al juego, pero acabo de descubrir una solución a este problema.

Esta solución permite un puntero en el elemento secundario , mientras mantiene un cursor predeterminado en el elemento principal .

(Consulte la respuesta aceptada aquí para obtener una solución que no incluya mantener el cursor del elemento principal por defecto: cursor: el puntero no funciona: ¿después del elemento? )

En primer lugar, para esta solución pirata, debe renunciar a la capacidad de interactuar con el elemento principal con el mouse.

Establecer el elemento padre en el cursor: pointer .

Luego, configurando el elemento principal en pointer-events: none le permitirá "hacer clic / pasar por" el elemento principal.

Luego, para el pseudo elemento, simplemente vuelva a habilitar los eventos de pointer-events: auto con 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 3

Para hacer que IE 7,8,9,10 se comporte como los navegadores normales que pueden manejar los pseudo selectores, siempre uso IE7.js, una biblioteca de JavaScript para que Microsoft Internet Explorer se comporte como un navegador compatible con los estándares. Corrige muchos problemas de HTML y CSS relacionados con Internet Explorer. Una alternativa sería modernizr.js, que es una buena implementación para hacer que los pseudo selectores trabajen con IE. Espero que eso ayude.

Answer 4

manifestación

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>

Answer 5

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