P: Quiero utilizar
Código PHP:
a:hover:before {content: "["}
a:hover:after{content:"]"}
sobre IE, que no lo soporta. ¿Alternativa?
R: Puedes copiar este codigo que mostrara corchetes naranjas antes y despues de todos los enlaces sólo cuando el raton esté encima. Incluso más estetico, pues no se deforma el contenido de la pagina. (Habria que tener cuidado con los enlaces que tienen como contenido imagenes y tal, eso de vuestra mano
)
Código PHP:
<html>
<head>
<style>
.corchetes {
color: #f93;
font-weight:bold;
width:3px;
visibility:hidden;
display:inline;
}
</style>
</head>
<body>
<a href="a.htm">enlace</a> texto texto texto
<a href="s.html">otro enlace</a> mas texto
<a href="i.htm">y otro</a> y se acaba aqui.
<script>
// necesitaba dos funciones, el insertBefore que ya existe, y el insertAfter que nos lo sacamos de la manga
function insertAfter(parent, node, referenceNode) {
parent.insertBefore(node, referenceNode.nextSibling);
}
// la coleccion de <a> (anchors)
var As=document.getElementsByTagName("A");
var corchete1,corchete2;
//por cada enlace
for(var a=0;a<As.length;a++) {
//quitamos los espacios anteriores y posteriores a los enlaces, que si no con el corchete oculto parecera doble espaciado
var anterior = As[a].previousSibling;
if(anterior!=null) {
anterior.nodeValue = anterior.nodeValue.substr(0,anterior.nodeValue.length-1);
}
var siguiente = As[a].nextSibling;
if(siguiente!=null) {
siguiente.nodeValue = siguiente.nodeValue.substr(1);
}
//creamos los corchetes, y les aplicamos el estilo "corchetes"
corchete1=document.createElement("DIV");
corchete2=document.createElement("DIV");
corchete1.appendChild( document.createTextNode("[") );
corchete2.appendChild( document.createTextNode("]") );
corchete1.className=corchete2.className="corchetes";
//insertamos los corchetes antes y despues del enlace
As[a].parentNode.insertBefore( corchete1 , As[a] );
insertAfter( As[a].parentNode, corchete2, As[a] );
//los eventos que se ocuparan de poner los enlaces y quitarlos
As[a].onmouseover=function() {
this.previousSibling.style.visibility="visible";
this.nextSibling.style.visibility="visible";
}
As[a].onmouseout=function() {
this.previousSibling.style.visibility="hidden";
this.nextSibling.style.visibility="hidden";
}
}
</script>
</body>
</html>
Debe ir al final de la pagina, por supuesto.
