我使用动态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();
});
});