Foros del Web » Programando para Internet » Javascript »

Efecto rollover en un span

Estas en el tema de Efecto rollover en un span en el foro de Javascript en Foros del Web. Buenas, soy bastante novatilla en css y quizás me estoy liando y quiero hacer lo que no se puede. Me explico. Tengo una lista con ...
  #1 (permalink)  
Antiguo 30/11/2011, 07:33
Avatar de kambiz_marta  
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 12 años, 8 meses
Puntos: 0
Efecto rollover en un span

Buenas, soy bastante novatilla en css y quizás me estoy liando y quiero hacer lo que no se puede.
Me explico. Tengo una lista con las siguientes opciones:
- Quien
- Qué
- Como
Y quisiera que en el mouseover de cada opción apareciera más texto, es decir:
- Quien somos
- Qué ofrecemos
- Como encontrarnos

Lo he montado de la siguiente manera. Lo que me hace falta es que aparecezcan el texto adicional en el mouseover

Código HTML:
Ver original
  1. <div id=header>
  2.              <ul id=navlist>
  3.                 <li><a href="#">QUIEN <span>somos</span</a></li>
  4.                 <li><a href="#">QUE; <span>ofrecemos</span></a><li>
  5.                 <li><a href="#">COMO <span>encontrarnos</span></a></li>
  6.               </ul>
  7.       </div>

Y en estilos lo siguiente:
Código CSS:
Ver original
  1. #navlist li a:hover {
  2.     color: #FFF;                    background-color: #0099CC;
  3.     visibility: visible;
  4. }
  5.  
  6. #navlist li a span {
  7.     font-family: "Bradley Hand ITC";
  8.     font-size: 24px;
  9.     visibility: hidden;
  10. }

Me falta encontrar la manera de indicar el efecto mouseover del span.
Gracias por vuestra ayuda
  #2 (permalink)  
Antiguo 30/11/2011, 08:30
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años
Puntos: 1012
Respuesta: Efecto rollover en un span

puedes usar el pseudo elemento css :after
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 30/11/2011, 17:56
Avatar de kambiz_marta  
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Efecto rollover en un span

Muchas gracias por el aporte.
Desconocía totalmente el after, before, .... Me lo he estado mirando.
De todas maneras, cómo el texto a visualizar es diferente a cada opción, no he encontrado la manera de diferenciarlos, a no ser que asigne a cada opción un id diferente, y luego los trate independientemente.

Y otra pregunta que me ha surgido de nuevo. Si quiero que este texto se mantenga visible al hacer click en una opción, el after no me sirve, verdad?

De nuevo muchísimas gracias.
  #4 (permalink)  
Antiguo 01/12/2011, 05:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años
Puntos: 1012
Respuesta: Efecto rollover en un span

tendrás que crear un selector como este
Cita:
#navlist li a:hover {
color: #FFF;
background-color: #0099CC;
font: 24px 'Bradley Hand ITC';
}
y añadir 3 selectores cada uno con su content correspondiente

respondiendo a tu segunda pregunta. no, para ello, en caso que quieras continuar con css, has de usar la pseudo clase :target. el problema es que no es admita por ie8-. no sé si la acepta la versión 9.

si tu intención es hacerlos visible con el evento onclick y que sea cross browser, tendrás que usar javascript
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #5 (permalink)  
Antiguo 01/12/2011, 14:24
Avatar de kambiz_marta  
Fecha de Ingreso: noviembre-2011
Mensajes: 15
Antigüedad: 12 años, 8 meses
Puntos: 0
Respuesta: Efecto rollover en un span

Muchas gracias

Etiquetas: efecto, rollover, span
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 09:53.