Question

如何创建一个jQuery hover，以便在鼠标结束时显示div，就像Twitter替换转推和收藏一样？

这是我的HTML：

<div style="display:none;" id="blab">
  <?php echo $blab_id; ?>
</div>
<a href="blab.php?id=<?php echo $blab_id; ?>">
    <div class="blab_body" id="hover" value="Hide">
        <table>
            <tr>
                <td valign="top">
                    <img src="<?php echo $profile_pic_info; ?>" class="blab_image" width="50" height="50" />
                </td>
                <td>&nbsp;</td>
                <td>
                    <table>
                        <tr>
                            <td valign="top">
                                <a href="profile.php?id=$mem_id">
                                    <strong><?php echo $added_fullname; ?></strong>
                                </a>
                                <?php echo $added_to_fullname; ?>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <?php echo $blab_body; ?>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <text style="color:gray;">
                                    <?php echo $blab_date; ?>|<?php echo $device; ?>
                                </text>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        <div style="background:#000; display:none;" id="id">&nbsp;</div>
    </div>
</a>
<hr />

这是我的JavaScript代码：

$('#id').hide();

$('#hover').hover(function () {
    var blab_id = $('#blab').text();
    $('#id').show();
}, function () {
    $('#id').hide();
});

仅显示第一个div。

Answer 1

您只能在整个页面上使用一次ID！如果您在页面上插入此div的多个副本，则您的HTML代码将无效。这就是为什么jQuery只将事件处理程序附加到第一个元素。

解决方案是使用class="hover_enabled"而不是id="hover"，因为允许将同一个类添加到多个元素。以下是如何在jQuery中执行此操作：

$('.hover_enabled').hover(function() { ...

同样适用于#id。

如何创建jquery悬停

1 个答案: