Superposición de texto de Jquery en la miniatura al pasar el mouse en la lista

¿Cómo puedo hacer que aparezca texto al pasar el mouse sobre una imagen en miniatura? He encontrado algunos tutoriales, pero necesito que funcione en una estructura de lista como la siguiente. Preferiblemente como li adicional o pie de foto.

El sitio de referencia está aquí: http://owenmyers.co.uk/TESTING/

 #item {
position:absolute;
top:117px;
width:711px;
height:100%;
left:150px;
z-index:1;
}
.item {
    margin:0px;
}
.item.first {
    clear: left;
    margin-left: 0;
}
.item img {
    opacity:0;
    border:1px solid #000;
}

.item ul {
    display:inline;
    list-style-type:none;
    list-style:none;
    float:left;
    width:721px;
    padding:0px 0px;
    margin-left:-5px;
    z-index:5;
}
.item ul li {
    display:inline;
    float:left;
    list-style-type:none;
    list-style:none;
    float:left;
    width:170px;
    height:115px;
    padding:0px 5px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight:600;
    text-transform: none;
    color: #000000;
    text-decoration: none;
}

<div id="item" class="item">
<ul style="margin-top:0px;">
<li class="item"><a href="#"><img src="img/holderthumb.jpg"/></a></li>
<li><a href="#"><img src="img/holderthumb.jpg"/></a></li>
<li><a href="#"><img src="img/holderthumb.jpg"/></a></li>
<li><a href="#"><img src="img/holderthumb.jpg"/></a></li>
</ul>

preguntado el 22 de mayo de 12 a las 21:05

1 Respuestas

Para cada imagen debe agregar el atributo alt. Por ejemplo
<img src="img/holderthumb.jpg" alt="Description Here"/>
También puede hacer el atributo de título
<img src="img/holderthumb.jpg" title="Description Here"/>

Una vez que haya hecho eso, puede crear un script simple que tome esos atributos (ya sea o) y los muestre. Por ejemplo aquí hay un ejemplo

$("img#id").hover(
function(){
    var desc = $(this).attr("title"); //Or $(this).attr("alt");
    $("divthatcontainstext").html(desc); //Puts attribute text into div that needs text
}, //Hover Encompasses Mouse on and Mouse off into one function
function(){
    $("divthatcontainstext").html(""); //Clears div with text
});

Creo que esa fue la base de tu pregunta. Asegúrese de que el código sea contenedor en cualquiera $(document).ready(function(){}); or $(function(){});

contestado el 22 de mayo de 12 a las 21:05

Parece que no puedo hacer que funcione; mira mi código aquí: owenmyers.co.uk/PRUEBAS Obteniendo este error (¿no está seguro de que esté directamente relacionado?) "event.layerX y event.layerY están rotos y obsoletos en WebKit. Se eliminarán del motor en un futuro próximo". - Ben Vickers

Ese error está relacionado con una función que tiene que estaría rastreando la posición del mouse... No tengo esa función en uso en mi código. Sin embargo, ese error es una advertencia y en realidad no debería afectar el funcionamiento del código: como

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.