Question

alt text

好的，我有<table>

在其中<tr>定义了上面的这些框（浅灰色/灰色/黄色......）

现在我想在你将鼠标悬停在一个方框上时，你会出现一个删除按钮。

我在每个<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();

});

name =“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

要至少使丑陋一致（即使删除按钮使用空格，即使它不可见），请使用visibility: hidden和visibility: visible。

Answer 2

问题是“display：none”使得目标元素不占用空间，将它放在表格单元格上也不是一个好主意，因为这会产生部分隐藏的列。相反，使用“visibility：hidden;”并将其放在内部图像上，如下所示：

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

然后在您的代码中，而不是“show（）”元素，您将设置可见性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编码样式和最佳实践。你在代码中做了很多事情，这些事情被认为是风格上的草率/丑陋，因为它们会使你的代码更容易出错并且更难维护。

jQuery：悬停，显示和表格问题

2 个答案: