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消失，然后你的鼠标就在第一个{{1} }再次触发div事件，以便mouseenter再次出现....依此类推......这会导致闪烁

我最好的建议是嵌套hoverdiv :(你必须稍微调整一下css）

hoverdiv

当<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

时，mouseleave不会被触发

Answer 2

工作演示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();
    });
});

在元素中使用鼠标悬停和鼠标悬停会使悬停连续闪烁

2 个答案: