Question

我有这段代码

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

当我把鼠标放在div上时，第一个div工作而另一个不工作，id的值是所有de div的“tiros”，我用函数mouseover调用，只能在第一次潜水Hep并抱歉我的英文 ：）

Answer 1

将您的id标记用多个相同的值更改为一个类。然后将jQuery函数中的选择器更改为.而不是#。

因此它将是$(".tiros").mouseover(function() { $(".hello").css('display',''); });而不是$("#tiros").mouseover(function() { $("#hello").css('display',''); });，并且您将针对您使用多个实例调用id的其他函数进行更改。

具有重复ID的JQuery鼠标悬停

1 个答案: