首页 文章

触发mouseenter和mouseleave重复元素

提问于
浏览 次
0

我从MySql获取数据，我在表中显示它 . 我希望每个包含某个 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 的第一次出现 . 我想我弄错了 . 能帮我解决这个问题吗？谢谢 .

javascript jquery mouseenter mouseleave

4 回答

  • 1

    您可以使用：

    $('#triggerTooltip').mouseenter(function() {
    $(this).find('.tooltip').each(function() {$(this).show()});
}).mouseleave(function() {
    $(this).find('.tooltip').each(function() {$(this).hide()});
});
    回复于
  • 3

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

    .triggerTooltip .tooltip {
    display: none;
}

.triggerTooltip:hover .tooltip {
    display: block;
}
    回复于
  • 1

    您似乎正在复制（或复制）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>
    回复于
  • 2

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

    回复于

相关问题