为重复元素触发 mouseenter 和 mouseleave

Question

我正在从 MySql 获取数据并在 table 中显示它。我希望每个包含特定 id 的 <td> 在 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

您似乎在复制（或n复制）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 2

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

Answer 3

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

.triggerTooltip .tooltip {
    display: none;
}

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

Answer 4

您可以使用：

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

为重复元素触发 mouseenter 和 mouseleave

Trigger mouseenter and mouseleave for repeating elements

javascript

jquery

mouseenter

mouseleave

HTML