1

我正在使用动态 ID 在 JSP 页面上动态呈现两个元素。在鼠标悬停在每个元素上时，我正在渲染 a 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。我有两个国家，所以两个悬停与他们的引用，所以当我检查并单击添加要显示的两个悬停的值时，应单独显示，建议我遵循解决上述要求的方法

4

2 回答 2

1

发生这种情况是因为当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>

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

于 2013-07-26T16:19:50.367 回答
0

工作演示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();
    });
});
于 2013-07-26T16:39:06.770 回答