Question

En la siguiente serie de imágenes el título está originalmente oculto por la regla css:

label { display: none }    
<ul>
    <li>
        <img src='foto1.jpg'/>
        <label>Foto 1</label>
    </li>
    <li>
        <img src='foto2.jpg'/>
        <label>Foto 3</label>
    </li>
    <li>
        <img src='foto3.jpg'/>
        <label>Foto 3</label>
    </li>
</ul>

Deseo hacer visible el título de la foto sólo cuando el puntero del ratón esté sobre la imagen.

¿Como lo puedo hacer?

Answer 1

Prueba así:

$('img').hover(function() {
    $(this).siblings('label').show();
},function() {
    $(this).siblings('label').hide();
});

Answer 2

Es muy fácil con CSS y de hecho sería la mejor manera

li:hover label {
   display: block;
}