Añadir dos corchetes en link

FlamingoX · #1 (**permalink**) 31/08/2005, 07:49

Hola,
no se si se podrá hacer esto: resulta que quiero que en un enlace de texto al pasar el ratón por encima aparezcan dos corchetes al lado del texto.

Ejemplo:

Estado normal: enlace
Estado mouseover: [enlace]

Es posible? gracias

CORE · #2 (**permalink**) 31/08/2005, 08:28

a:hover:before {content: "["}
a:hover:after{color:"]"}

saludos

FlamingoX · #3 (**permalink**) 31/08/2005, 09:33

no funciona... no sale nada...

JavierB · #4 (**permalink**) 31/08/2005, 11:18

Hola FlamingoX

Hay un errorcillo en el código de CORE

a:hover:before {content: "["}
a:hover:after{content:"]"}

de todas formas te adelanto que en IE no funciona (cosas del dichoso explorer)

Saludos,

CORE · #5 (**permalink**) 31/08/2005, 12:46

Cita:

Iniciado por JavierB

Hola FlamingoX

Hay un errorcillo en el código de CORE

a:hover:before {content: "["}
a:hover:after{content:"]"}

de todas formas te adelanto que en IE no funciona (cosas del dichoso explorer)

Saludos,

ups!! es verdad gracias

FlamingoX · #6 (**permalink**) 31/08/2005, 13:42

Vaya :( a mi me interesa principalmente en Internet Explorer...

RoQ · #7 (**permalink**) 31/08/2005, 13:57

si debe funcionar en IE, puesto que estas usando hover dentro de un enlace, la pseudoclase hover sola no es soportada por IE

FlamingoX · #8 (**permalink**) 31/08/2005, 14:52

Lo acabo de probar y en Explorer no funciona, en NetScape Si...

K3NNY · #9 (**permalink**) 31/08/2005, 16:20

El problema no es con el Hover RoQ, el problema es con el :before :after. Tengo entendido que esas propiedades CSS son bastante nuevas por lo que todavia no son aceptadas por todos los navegadores (entre ellos el IE).

derkenuke · #10 (**permalink**) 03/09/2005, 09:14

Podriamos hablar de javascript...

Código PHP:

  <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> 
 
var As=document.getElementsByTagName("A"); 
for(var a=0;a<As.length;a++) { 
    As[a].onmouseover=function() { 
        this.innerHTML="["+this.innerHTML+"]"; 
    } 
    As[a].onmouseout=function() { 
        this.innerHTML=this.innerHTML.substring(1,this.innerHTML.length-1); 
    } 
} 
 
</script>

Lo unico que los corchetes serian clickeables, habria que hacer un par de apaños para que no lo fuesen...

derkenuke · #11 (**permalink**) 03/09/2005, 09:31

O un ejemplo con un poco mas de estetica (sin deformacion):

Código PHP:

  <style> 
body { 
    color: #000; 
    text-decoration:none; 
} 
/* que corchete tenga el mismo estilo que el texto sin enlace, para que no parezca link */ 
.corchete { 
    color: #000; 
    text-decoration:none; 
    width:3px; 
    visibility:hidden; 
    display:inline; 
} 
</style> 
 
 
<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> 
 
var As=document.getElementsByTagName("A"); 
for(var a=0;a<As.length;a++) { 
    // le ponemos los corchetes, todavia ocultos 
    As[a].innerHTML="<div class='corchete'>[</div>"+As[a].innerHTML+"<div class='corchete'>]</div>"; 
    As[a].onmouseover=function() { 
        this.childNodes[0].style.visibility="visible"; 
        this.childNodes[this.childNodes.length-1].style.visibility="visible"; 
    } 
    As[a].onmouseout=function() { 
        this.childNodes[0].style.visibility="hidden"; 
        this.childNodes[this.childNodes.length-1].style.visibility="hidden"; 
    } 
} 
 
</script>

derkenuke · #12 (**permalink**) 03/09/2005, 12:15

Aunque en realidad lo correcto y elegante seria hacer:

Código PHP:

  <head> 
 
<style> 
.corchetes { 
    color: #000;  
    text-decoration:none;  
    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>  
 
function insertAfter(parent, node, referenceNode) { 
    parent.insertBefore(node, referenceNode.nextSibling); 
} 
 
var As=document.getElementsByTagName("A");  
var corchete1,corchete2; 
for(var a=0;a<As.length;a++) { 
    corchete1=document.createElement("DIV"); 
    corchete2=document.createElement("DIV"); 
    corchete1.appendChild( document.createTextNode("[") ); 
    corchete2.appendChild( document.createTextNode("]") ); 
    corchete1.className=corchete2.className="corchetes"; 
    As[a].parentNode.insertBefore( corchete1 , As[a] ); 
    insertAfter( As[a].parentNode, corchete2, As[a] ); 
    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>

JavierB · #13 (**permalink**) 03/09/2005, 12:24

Hola derkenuke

Si que te lo has currado bien

Opino que este código estaría muy bien en las FAQs de JavaScript.

Saludos,

derkenuke · #14 (**permalink**) 03/09/2005, 12:32

Lo pondre.. me queda un detallito. ya sabes que estoy con el post
http://www.forosdelweb.com/f13/insertar-donde-quiera-con-dom-330578/#post1243376
;)