javascript - 在元素中使用 mouseover 和 mouseout 会使悬停持续闪烁

Question

我使用动态 ID 在 JSP 页面上动态呈现两个元素。当鼠标悬停在每个元素上时，我将渲染一个 div，当鼠标移出时，我将生成相同的 display 值 none。问题是当我将鼠标悬停在 div 上时，div 不断闪烁。我该如何解决这个问题？

示例代码:

<table>
    <tr>
        <td>
            <div onmouseover="showblock(hoverdivid)" onmouseout="hideblock(hoverdivid)">india</div>
            <div class="hoverdiv" id="dynamicallygenerated">
                <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
            </div>
        </td>
        <td>
            <div onmouseover="" onmouseout="">america</div>
            <div class="hoverdiv" id="dynamicallygenerated">
                <li>a list of checkboxes with state names of the country hovered will be inserted using ajax</li>
            </div>
        </td>
    </tr>
</table>

<script>
var showblock;
var hideblock;
$(document).ready(function (e) {

    showblock = function (id) {

        $("#" + id).show();

    }
    hideblock = function (id) {

        $("#" + id).hide();

    }

});
</script>

扩展我的问题

我提到我使用ajax在悬停中插入复选框，在同一个悬停中我有一个添加按钮，它将我在悬停中检查的值添加到表外的其他一些div中。我有两个国家，所以两个悬停及其引用，因此当我检查并单击添加要显示的两个悬停的值时，这些值应单独显示，建议我解决上述要求的方法

Answer 1

发生这种情况是因为当显示 hoverdiv 时，您的鼠标位于其上，因此触发 mouseleave 事件，因此 hoverdiv 消失，然后您的鼠标再次位于第一个 div 上，因此触发了 mouseenter 事件，因此 hoverdiv 再次出现......等等......这会导致闪烁

我最好的建议是嵌套悬停div:(你必须稍微调整CSS)

<table>
    <tr>
        <td>
            <div onmouseover="" onmouseout="">
                india
                <div class="hoverdiv"></div>
            </div>
        </td>
        <td>
            <div onmouseover="" onmouseout="">
                america
                <div class="hoverdiv"></div>
            </div>
        </td>
    </tr>
</table>

当hoverdiv位于另一个div内部时，将鼠标悬停在hoverdiv上时不会触发mouseleave