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

Using mouseover and mouseout in a element makes a hover blinking continuously

本文关键字：悬停 mouseout 闪烁 元素 mouseover      更新时间：2023-09-26

我使用动态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中。我有两个国家/地区，所以两个悬停都有他们的引用，所以当我选中并点击添加要显示的两个悬停的值时，应该单独显示，建议我解决上述要求的方法

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

我最好的建议是嵌套hoverdiv：（你必须稍微调整一下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将不会被触发

工作演示http://jsfiddle.net/cse_tushar/FKacT/1

HTML

<table border="1">
    <tr>
        <td>
            <div class="div">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 class="div">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>

css

td{
    vertical-align: top;
}

js

$(document).ready(function () {
    $('.div').hover(function () {
        x = $(this).css('width');
        $(this).parent().find('.hoverdiv').show();
        $(this).css('width', $(this).parent('td').width());
    }, function () {
        $(this).css('width', x);
        $(this).parent().find('.hoverdiv').hide();
    });
});
相关文章：