Así que estoy intentando convertir un elemento li en un enlace en el que se puede hacer clic colocando absolutamente un elemento a sobre él con un 100% de altura y ancho. Esto funcionó bien y fue una solución relativamente simple para Chrome y FF, pero en IE9, los otros elementos detrás del enlace aún se pueden seleccionar, por lo que no se puede hacer clic en el enlace donde haya otro elemento detrás.

Aquí hay una pequeña parte del problema, que funciona como se esperaba en Chrome y FF, pero no en IE9: http: // jsfiddle.net/DsshY/5/

Primero me referí a Convertir un div en un enlace e intenté poner un span en el enlace, pero eso no funcionó. Probé varias combinaciones de posiciones e índices z, e incluso envolví el otro contenido en un div con un índice z más bajo que el enlace, pero sin éxito.

Espero que sea algo simple que me falta, porque prefiero no tener que recurrir al uso de Javascript para hacer que hacer clic en el elemento li sea un "enlace", aunque sé que probablemente sea una solución.

1
justisb 6 dic. 2011 a las 23:42
Curiosamente, si agrego un color de fondo al intervalo en el enlace, ninguno de los elementos detrás de él se puede seleccionar, como en jsfiddle.net/DsshY/6
 – 
justisb
6 dic. 2011 a las 23:51
Por lo tanto, establecer un color de fondo y una opacidad en 0 como en jsfiddle.net/DsshY/7 realmente parece como una solución que funciona en los tres navegadores, pero parece un poco hack y no es la forma correcta de hacerlo.
 – 
justisb
6 dic. 2011 a las 23:53

1 respuesta

La mejor respuesta

Por lo tanto, establecer un color de fondo y una opacidad en 0 como en jsfiddle.net/DsshY/7 en realidad parece una solución que funciona en los tres navegadores. Esto parece un poco hacky y no es la forma correcta de hacerlo, pero bueno, funciona en IE8 / 9 y las últimas versiones de Chrome y FF que probé.

Esencialmente, terminé aplicando estos estilos al intervalo dentro de mi elemento a, lo que efectivamente convirtió el elemento principal relativamente posicionado en un enlace:

a {
    position: relative;     
}

    a span {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9;
        background-color: #FFF;
        opacity: 0;
        filter: alpha(opacity=0);
    }
1
justisb 2 ago. 2016 a las 00:01