Foros del Web » Creando para Internet » CSS »

Ocultar span

Estas en el tema de Ocultar span en el foro de CSS en Foros del Web. Hola! Estoy haciendo un pequeño trabajito con javascript, pero a lo mejor es posible hacerlo unciamente con css. Os comento, tengo este span @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); ...
  #1 (permalink)  
Antiguo 05/01/2011, 08:22
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Ocultar span

Hola!
Estoy haciendo un pequeño trabajito con javascript, pero a lo mejor es posible hacerlo unciamente con css.
Os comento, tengo este span
Código PHP:
Ver original
  1. <span class="caja">
  2.         <div class="imagen" >
  3.           <img onMouseOut="this.style.visibility='hidden'" src="phpBB3/download/file.php?avatar=<?php echo $row_consulta_datos['user_avatar']; ?>" />
  4.          </div>
  5.         <div class="contenedor2Der"  >
  6.           <p><?php echo $row_consulta_datos['username']; ?></p>
  7.           <?php echo $row_consulta_datos['user_website']; ?>
  8.         </div>
  9.       </span>

lo que quiero conseguir es que se oculte totalmente el span al sacar el ratón de la imagen hay alguna forma de en vez de usar
Código HTML:
Ver original
  1. onMouseOut="this.style.visibility='hidden'"
usar algo parecido a esto
Código HTML:
Ver original
  1. onMouseOut="span.style.visibility='hidden'"
  2. <!-----------ó------------>
  3. onMouseOut=".caja.style.visibility='hidden'"

Un saludo!!
  #2 (permalink)  
Antiguo 05/01/2011, 09:04
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Respuesta: Ocultar span

Yo diría que no, pero aún así el JS que tú tienes oculta la imagen, no el span.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #3 (permalink)  
Antiguo 05/01/2011, 09:52
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ocultar span

Cita:
Iniciado por davidbrepe Ver Mensaje
Hola!
Estoy haciendo un pequeño trabajito con javascript, pero a lo mejor es posible hacerlo unciamente con css.
Cita:
Iniciado por _cronos2 Ver Mensaje
Yo diría que no,...
Saludos (:
oñó!!



davidbrepe:
Primero, su etiquetado html es erróneo. Un span no puede contener div´s. Es un elemento "inline".
El tag span se debe utilizar para diferenciar una parte del todo.

Pero explique un poco mejor su intención.
¿Quiere que la imagen y el texto se vean, y que al hacer :hover sobre ellos desaparezca qué? ¿Sólo el texto, sólo la imagen, o ambos (imagen y texto)?
¿Esa estructura va a contener más de un grupo texto+imagen o sólo uno?
Facilite algo más de información y el código html generado (el programado en php no sirve.
  #4 (permalink)  
Antiguo 05/01/2011, 13:52
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar span

Cita:
Iniciado por kseso? Ver Mensaje

davidbrepe:
Primero, su etiquetado html es erróneo. Un span no puede contener div´s. Es un elemento "inline".
El tag span se debe utilizar para diferenciar una parte del todo.

Pero explique un poco mejor su intención.
¿Quiere que la imagen y el texto se vean, y que al hacer :hover sobre ellos desaparezca qué? ¿Sólo el texto, sólo la imagen, o ambos (imagen y texto)?
¿Esa estructura va a contener más de un grupo texto+imagen o sólo uno?
Facilite algo más de información y el código html generado (el programado en php no sirve.
te explico:
este es el link del proyecto
[URL="http://www.airsoftgato.info/a.php"]http://www.airsoftgato.info/a.php[/URL]
Lo que quiero es que al mover el cursor fuera de la imagen se oculte el span

esplico un poco el codigo,
esta compuesto por una imgen, que es un link, al pasar por encima el cursor (hover) se activa visibility: visible; para el span

ya he probado con javascript pero solo funciona con el primer elemento de la lista
  #5 (permalink)  
Antiguo 05/01/2011, 14:26
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ocultar span

Su html de cada elemento de la lista:
Código HTML:
Ver original
  1. <li>
  2.     <a href="phpBB3/memberlist.php?mode=viewprofile&amp;u=2" class="thumbnail">
  3.         <img width="90px" height="90px" border="0" src="phpBB3/download/file.php?avatar=2_1263701157.jpg">
  4.         <span>
  5.                <div class="imagen">
  6.                      <img src="phpBB3/download/file.php?avatar=2_1263701157.jpg">
  7.                </div>
  8.                <div class="contenedor2Der">
  9.                      <p>defekator</p>
  10.             </div>
  11.         </span>
  12.     </a>
  13. </li>
Una sugerencia:
Código HTML:
Ver original
  1. <li>
  2.       <a class="thumbnail" href="#">
  3.             <img src="..." alt="alt" />
  4.             <span>Nombre</span>
  5.       </a>
  6. </li>
y sólo es cuestión de ocultar el span (display: none) y visualizarlo al a:hover span como bloque posicionado absolutamente con ayuda de top/bottom y un fondo (background)
  #6 (permalink)  
Antiguo 05/01/2011, 14:41
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar span

Cita:
Iniciado por kseso? Ver Mensaje
Su html de cada elemento de la lista:

Una sugerencia:
Código HTML:
Ver original
  1. <li>
  2.       <a class="thumbnail" href="#">
  3.             <img src="..." alt="alt" />
  4.             <span>Nombre</span>
  5.       </a>
  6. </li>
y sólo es cuestión de ocultar el span (display: none) y visualizarlo al a:hover span como bloque posicionado absolutamente con ayuda de top/bottom y un fondo (background)
pero voy a seguir teniendo el mismo problema, cuando se hace aparecer el span este pasa a pertenecer al link, con lo cual el hover siempre va a quedar activo sobre este (el span)
no se si me he explicado
  #7 (permalink)  
Antiguo 05/01/2011, 20:34
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Ocultar span

bueno al final lo he conseguido con javascript San Jquery
dejo el script por si alguien lo quiere ;)

Código Javascript:
Ver original
  1. <script type="text/javascript" src="jquery-1.4.4.js"></script>
  2.  
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5.  $(".imagen").mouseout(function() {
  6.      $("span").css({'visibility':'hidden',});
  7.    });
  8. $(".avatar").mouseover(function() {
  9.      $("span").css({'visibility':'visible',});
  10.    });
  11.  
  12. });
  13. </script>

Un saludo y muchas gracias a los dos ;)

Etiquetas: 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 17:44.