php - 如何创建jquery悬停

Question

如何创建一个 jQueryhover来显示div鼠标悬停时的 twitter repla 转发和收藏？

这是我的 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.