Hola, el código que muestro lo puedo aplicar solo a una imagen de la lista (no funciona en las otras), y necesito que se aplique a cada una por separado (se agregaran mas en el futuro). La idea es que al pasar un mouseover por una imagen se muestre el nombre especifico.
Idealmente no tener que dar un ID distinto a cada li o div.
Disculpen lo básico, pero estoy aprendiendo.
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#objectEvent").mouseover(function(){
$("#object").show();
}).mouseout(function(){
$("#object").hide();
});
});
$(this.document).ready(function(){
menu.mouseover(function(){
displayOptions($(this).find("li"));
});
menu.mouseout(function(){
hideOptions($(this));
});
})
</script>
</head>
<body>
<div id='perfiles_caja'>
<div class="list_carousel">
<ul id="foo1">
<li>
<div>
<p id="object" style="display:none">Juan<br />
Perez
</p>
<a id="objectEvent" href="perfiles_detalle.html"><img src="images/perfiles/pf_grandes/10.png" /></a>
</div>
</li>
<li>
<div>
<p id="object" style="display:none">Juan<br />
Perez
</p>
<a id="objectEvent" href="perfiles_detalle.html"><img src="images/perfiles/pf_grandes/10.png" /></a>
</div>
</li>
</ul>
</div>
</body>
</html>