Ocultar span

[davidbrepe]

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:

<span class="caja">
        <div class="imagen" >
          <img onMouseOut="this.style.visibility='hidden'" src="phpBB3/download/file.php?avatar=<?php echo $row_consulta_datos['user_avatar']; ?>" />
         </div>
        <div class="contenedor2Der"  >
          <p><?php echo $row_consulta_datos['username']; ?></p>
          <?php echo $row_consulta_datos['user_website']; ?>
        </div>
      </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:

onMouseOut="this.style.visibility='hidden'"
 

usar algo parecido a esto

Código HTML:

onMouseOut="span.style.visibility='hidden'"
<!-----------ó------------>
onMouseOut=".caja.style.visibility='hidden'"
 

Un saludo!!

[_cronos2]

Yo diría que no, pero aún así el JS que tú tienes oculta la imagen, no el span.
Saludos (:

[kseso?]

Iniciado por davidbrepe

Hola!
Estoy haciendo un pequeño trabajito con javascript, pero a lo mejor es posible hacerlo unciamente con css.

Iniciado por _cronos2

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.

[davidbrepe]

Iniciado por kseso?

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

[kseso?]

Su html de cada elemento de la lista:

Código HTML:

<li>
    <a href="phpBB3/memberlist.php?mode=viewprofile&amp;u=2" class="thumbnail">
        <img width="90px" height="90px" border="0" src="phpBB3/download/file.php?avatar=2_1263701157.jpg">
        <span>
               <div class="imagen">
                     <img src="phpBB3/download/file.php?avatar=2_1263701157.jpg">
               </div>
               <div class="contenedor2Der">
                     <p>defekator</p>
            </div>
        </span>
    </a>
</li>
 

Una sugerencia:

Código HTML:

<li>
      <a class="thumbnail" href="#">
            <img src="..." alt="alt" />
            <span>Nombre</span>
      </a>
</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)

[davidbrepe]

Iniciado por kseso?

Su html de cada elemento de la lista:

Una sugerencia:

Código HTML:

<li>
      <a class="thumbnail" href="#">
            <img src="..." alt="alt" />
            <span>Nombre</span>
      </a>
</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

[davidbrepe]

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

Código Javascript:

<script type="text/javascript" src="jquery-1.4.4.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
 $(".imagen").mouseout(function() {
     $("span").css({'visibility':'hidden',});
   });
$(".avatar").mouseover(function() {
     $("span").css({'visibility':'visible',});
   });
 
});
</script>
 

Un saludo y muchas gracias a los dos ;)