jQuery的：徘徊，显示和表问题

Question

好了，所以我有<table>

这里面有<tr>的定义上方（浅灰/灰/黄..）

这些盒子

现在我想让你把鼠标悬停在一个盒子上时，你会看到一个deletebutton。

我已分别<tr>内做到了这一点通过（每个箱子里面）有这样的：

  <td id="delPMicon<?php echo $id; ?>" style="display: none;"> 
          <img src="images/removeWallComment.png"> 
         </td> 

然后，我得到这个：

$('[name=pm]').hover(function() { 
var id = $(this).attr('id'); 

    $('#delPMicon'+ id).show(); 

}); 

名= “PM” 是每名<tr>。

这工作正常，但当我标记在其中一个框中，它会变成你如何看到上面。内容被移动到左边，然后就会出现。我不想要这个。我希望它像图像的顶部，然后当你标记结束时，就会出现一个del按钮，在桌子上没有任何变化，并且不会变得如此丑陋，就像你在上面看到的那样，当我悬停其他盒子时变小？

我该怎么做？

这里是我的<tr>

      <tr 
          <?php 
          if($type == "invitation"){ 
          echo 'class="pmInvitation"'; 
          }else{ 
          echo $checkSeen; }?> id="<?php echo $id; ?>" name="pm"> 
    <td class="alternating" style="padding:4px;"> 
           <img border="0" class="image-xxsmall-border" src="images/profilePhoto/thumbs/<?php echo profilbild($bID); ?>" style="width: 44px; height: 48px;"> 
           </td> 
    <td valign="top" style="padding-top:4px;padding:4px;" class="alternating"> 
          <a href="profil.php?id=<?php echo $bID; ?>"><?php echo $name; ?></a> 
          <br /> 
            <span title="forsendelses dato" class="GrayText"><?php get_time($date); ?> 
            <?php if(!(get_day_name_return($date) == "idag")){ 
            echo "<br>". get_day_name_return($date); }?></span> 

           </td> 
    <td valign="top" style="padding-top:4px;padding:4px;" class="alternating"> 

           </td> 
    <td valign="top" style="padding-top:4px;padding:4px;" class="alternating"> 
            <a href="pm.php?read=<?php echo $id; ?>"> 
            <?php echo $title; ?></a> 
            <br /> 
            <span style="font-size: 11px; font-style: italic;"> 
            <a href="pm.php?read=<?php echo $id; ?>"> 
            <?php echo substr($msg, 0, 46); ?>.. 
            </a> 
            </span> 

           </td> 


     <td style="padding-right:4px;padding:4px;" class="alternating"> 
             <input class="cbPick" name="marks[]" type="checkbox" value="<?php echo $id; ?>"> 
            </td> 


<td id="delPMicon<?php echo $id; ?>" style="display: none;"> 
             <img src="images/removeWallComment.png"> 
            </td> 
                    </td> 
    </tr> 

我甚至试图删除显示：没有#delPMicon，去掉IMG，然后悬停它应该在前面加上IMG，这个工作小有一点，但文本中中间和左边被移动到更多的左边，它为它提供了一些空间给delbutton，但是有足够的空间，我能看到什么？

Answer 1

问题是“display：none”使得目标元素不占用空间，并且将它放在表格单元格中也不是一个好主意，因为这样做会导致部分隐藏的列。相反，使用“visibility：hidden;”并把它里面的图像上，像这样：

<td> 
    <img src="images/removeWallComment.png" id="delPMicon<?php echo $id; ?>" style="visibility: hidden;"> 
</td> 

然后在你的代码，而不是“秀（）”荷兰国际集团你设定的能见度CSS，像下面的元素。你也错过了你的悬停处理程序，所以我也将它包含在下面。

$('[name=pm]').hover(function() { 
    var id = $(this).attr('id'); 
    $('#delPMicon'+ id).css('visibility', 'visible'); 
}, function() { 
    var id = $(this).attr('id'); 
    $('#delPMicon'+ id).css('visibility', 'hidden'); 
}); 

此外，请考虑阅读HTML和jQuery编码风格和最佳实践。你在代码中做了很多事情，这些事情被认为是文体上的草率/丑陋，因为它们使你的代码更容易出错并且更难维护。

Answer 2

为了至少使丑陋的一致（使删除按钮使用空间，即使它是不可见的），使用visibility: hidden和visibility: visible。