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