0

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 :)

Improve this question
4

1 Answer 1

Reset to default
0

Change your id tag with multiple of the same value to a class. Then change the selector in your jQuery function for what you wish to do to . instead of #.

So it would be $(".tiros").mouseover(function() { $(".hello").css('display',''); }); instead of $("#tiros").mouseover(function() { $("#hello").css('display',''); });, and you would make that change for the other functions where you're calling an id with multiple instances.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.