Question

我从MySql中获取数据，我将其显示在表格中。对于包含某个<td>的每个id，我希望在mouseenter上显示一些额外的信息，并使用jQuery将其隐藏在mouseleave上。这是HTML输出：

<table>
    <tbody>
        <tr>
            <th>Option 1</th>
            <th>Option 2</th>
            <th>Option 3</th>
        </tr>
<?php   
    while ($row = mysqli_fetch_assoc($result)) {
?>  
    <tr>
        <td id="triggerTooltip"><?php echo $row['option1']; ?>
            <div class="tooltip">
                <p>Extra info</p>
            </div>
        </td>                   
        <td><?php echo $row['option2']; ?></td>
        <td><?php echo $row['option3']; ?></td>
    </tr>
<?php
    }
?>
    </tbody>
</table>

工具提示的默认display属性设置为none。这是我正在使用的jQuery：

$('#triggerTooltip').mouseenter(function() {
    $(this).closest('.tooltip').show();
}).mouseleave(function() {
    $(this).closest('.tooltip').hide();
});

我尝试使用$(this).find('.tooltip')并且它有效，但仅适用于#triggerTooltip的第一次出现。我想我弄错了。能帮我解决这个问题吗？谢谢。

Answer 1

上面的答案是正确的，如果你愿意，这个行为也可以用CSS实现，其规则如下：

.triggerTooltip .tooltip {
    display: none;
}

.triggerTooltip:hover .tooltip {
    display: block;
}

Answer 2

您似乎正在复制（或 n plicating）ID。不要重复ID！改为使用类名。

$('.triggerTooltip').mouseenter(function() {
     $(this).find('.tooltip').show();  
}).mouseleave(function() {
     $(this).find('.tooltip').hide();
});

HTML

   <td class="triggerTooltip"><?php echo $row['option1']; ?>
        <div class="tooltip">
            <p>Extra info</p>
        </div>
    </td>

Answer 3

尝试使用jquery hover，它将两个函数作为参数，并记住类和ID是不同的。 ID在页面上是唯一的。

Answer 4

您可以使用：

$('#triggerTooltip').mouseenter(function() {
    $(this).find('.tooltip').each(function() {$(this).show()});
}).mouseleave(function() {
    $(this).find('.tooltip').each(function() {$(this).hide()});
});

触发mouseenter和mouseleave重复元素

4 个答案:

HTML