Foros del Web » Creando para Internet » CSS »

Añadir dos corchetes en link

Estas en el tema de Añadir dos corchetes en link en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 31/08/2005, 08:49
 
Fecha de Ingreso: junio-2003
Mensajes: 217
Antigüedad: 14 años, 5 meses
Puntos: 0
Añadir dos corchetes en link

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
  #2 (permalink)  
Antiguo 31/08/2005, 09:28
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
a:hover:before {content: "["}
a:hover:after{color:"]"}

saludos
  #3 (permalink)  
Antiguo 31/08/2005, 10:33
 
Fecha de Ingreso: junio-2003
Mensajes: 217
Antigüedad: 14 años, 5 meses
Puntos: 0
no funciona... no sale nada...
  #4 (permalink)  
Antiguo 31/08/2005, 12:18
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #5 (permalink)  
Antiguo 31/08/2005, 13:46
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
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
  #6 (permalink)  
Antiguo 31/08/2005, 14:42
 
Fecha de Ingreso: junio-2003
Mensajes: 217
Antigüedad: 14 años, 5 meses
Puntos: 0
Vaya :( a mi me interesa principalmente en Internet Explorer...
  #7 (permalink)  
Antiguo 31/08/2005, 14:57
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 8 meses
Puntos: 0
si debe funcionar en IE, puesto que estas usando hover dentro de un enlace, la pseudoclase hover sola no es soportada por IE
  #8 (permalink)  
Antiguo 31/08/2005, 15:52
 
Fecha de Ingreso: junio-2003
Mensajes: 217
Antigüedad: 14 años, 5 meses
Puntos: 0
Lo acabo de probar y en Explorer no funciona, en NetScape Si...
  #9 (permalink)  
Antiguo 31/08/2005, 17:20
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 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).
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #10 (permalink)  
Antiguo 03/09/2005, 10:14
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
Podriamos hablar de javascript...

Código PHP:
<a href="a.htm">enlace</atexto texto texto 
<a href="s.html">otro enlace</amas texto 
<a href="i.htm">y otro</ay 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...
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #11 (permalink)  
Antiguo 03/09/2005, 10:31
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
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</atexto texto texto 
<a href="s.html">otro enlace</amas texto 
<a href="i.htm">y otro</ay 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> 
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #12 (permalink)  
Antiguo 03/09/2005, 13:15
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
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</atexto texto texto 
<a href="s.html">otro enlace</amas texto 
<a href="i.htm">y otro</ay se acaba aqui

<
script

function 
insertAfter(parentnodereferenceNode) {
    
parent.insertBefore(nodereferenceNode.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.appendChilddocument.createTextNode("[") );
    
corchete2.appendChilddocument.createTextNode("]") );
    
corchete1.className=corchete2.className="corchetes";
    As[
a].parentNode.insertBeforecorchete1 , As[a] );
    
insertAfter( As[a].parentNodecorchete2, 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> 
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #13 (permalink)  
Antiguo 03/09/2005, 13:24
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola derkenuke

Si que te lo has currado bien Opino que este código estaría muy bien en las FAQs de JavaScript.

Saludos,
  #14 (permalink)  
Antiguo 03/09/2005, 13:32
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 14 años, 1 mes
Puntos: 45
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
;)
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:06.