I have this code
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tiros").mouseover(function() { $("#hello").css('display',''); });
$("#hello").mouseover(function() { $("#hello").css('display',''); });
$("#hello").mouseout(function() { $("#hello").css('display','NONE'); });
});
</script>
<link href="../css/tablas.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div align="center">
<style type="text/css">
td {
vertical-align: top;
}
</style>
<table id="tablas" border="0">
<caption id="titulo"> DISTRIBUCION DE MAQUINA SM74 <tr>
<td><table id="tablas" border="1">
<tr>
<td id="cabezera">07-06-2013</td>
</tr>
<tr>
<td> <div align="right" id="tiros">20000</div>
<div id="hello" style="display:NONE;position:absolute; z-index:1; ">
<ul>
<li id="Subtitulo">Nº OT: 19178</li>
<li id="Subtitulo">Tipo: P</li>
<li id="Subtitulo">Sucursal: ANTOFAGASTA</li>
<li id="Subtitulo">Detalle: PEGABLE</li>
<li id="Subtitulo">Cliente: ASOC. I</li>
</ul>
</div></td>
</tr>
</table></td>
<td><table id="tablas" border="1">
<tr>
<td id="cabezera">08-06-2013</td>
</tr>
<tr>
<td> <div align="right" id="tiros">20000</div>
<div id="hello" style="display:none; position:absolute; z-index:1;">
<ul>
<li>Nº OT: 19178</li>
<li>Tipo: P</li>
<li>Sucursal: ANTOFAGASTA</li>
<li>Detalle: PEGABLE</li>
<li>Cliente: ASOC. I</li>
</ul>
</div></td>
</tr>
</table>
</td>
<td><table id="tablas" border="1">
<tr>
<td id="cabezera">09-06-2013</td>
</tr>
</table></td>
<td><table id="tablas" border="1">
<tr>
<td id="cabezera">10-06-2013</td>
</tr>
</table></td>
<td><table id="tablas" border="1">
<tr>
<td id="cabezera">11-06-2013</td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
When I put the mouse over the div, the first div works and the other does not, the value of the id is "tiros" for all de divs and i call with the function mouseover and works only inf the first dive. Hep and sorry for my English :)