javascript - 如何使用 CSS 和 jQuery 在图像图标旁边显示 div？

Question

我有一个包含信息的表格，其中最后一列有一个图标，当鼠标悬停在它上面时，它会显示一个 div ，其中包含有关该记录的信息，它看起来像这样

ORIGINAL VIEW

我想这样做，当鼠标悬停在蓝色图标上时，在图标鼠标悬停旁边显示 div (黑色背景的矩形)，每个图标显示不同的信息，这是我的代码为此

CSS

.info-extra {

     position: fixed;
     z-index: 999;
     background-color: black;
     color: white;
     width: 300px;
     height: 150px;
     border-radius: 5px;
     box-shadow: 3px 3px 3px gray;
     top: 50%;
     left: 50%;
  }

HTML

echo '<td><img src="Images/iconos/fatcow/FatCow_Icons16x16/information.png" onmouseover="mostrarInfo('.$extra.')" onmouseout="ocultarInfo('.$extra.')"></td>';
echo '<div id="extra-'.$extra.'" class="info-extra" style="display: none;">
           <p>Hola</p>
      </div>';

这是预期的 View

EXPECTED VIEW

它应该在图标旁边居中对齐，如何实现这一点？显然它必须以相同的方式与每个图标一起工作，我希望你能帮助我，谢谢。

Javascript

function mostrarInfo(numero) {

   $('#extra-' + numero).show();
}


function ocultarInfo(numero) {

   $('#extra-' + numero).hide();
}

Answer 1

您的$extra在 onmouseover没有引号，因此它作为变量传递到函数中。为此使用转义引号 ( \" )。否则，当图像悬停在上面时，div 就会显示。至于div居中，您可以为每个<td>传递一个高度。 ，然后设置每个 div 从顶部开始的位置。

function mostrarInfo(numero,n) {
  $('#extra-' + numero).css('top',(200 + n)+"px");
   $('#extra-' + numero).show();
}


function ocultarInfo(numero) {

   $('#extra-' + numero).hide();
}

.info-extra {
     position: absolute;
     z-index: 999;
     background-color: black;
     color: white;
     width: 100px;
     height: 150px;
     border-radius: 5px;
     box-shadow: 3px 3px 3px gray;
     left: 0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<table>
  <tr>
    <td>abcahtohaeth</td><td>defetathao3hg</td><td><img src="Images/iconos/fatcow/FatCow_Icons16x16/information.png" onmouseover="mostrarInfo('a',20)" onmouseout="ocultarInfo('a')"></td>
  </tr>
  <tr>
    <td>abcahtohaeth</td><td>defetathao3hg</td><td><img src="Images/iconos/fatcow/FatCow_Icons16x16/information.png" onmouseover="mostrarInfo('a',40)" onmouseout="ocultarInfo('a')"></td>
  </tr>
  <tr>
    <td>abcahtohaeth</td><td>defetathao3hg</td><td><img src="Images/iconos/fatcow/FatCow_Icons16x16/information.png" onmouseover="mostrarInfo('a',60)" onmouseout="ocultarInfo('a')"></td>
  </tr>
</table><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="extra-a" class="info-extra" style="display: none;">
           <p>Hola</p>
      </div>