[英]How to show/hide new <div> near <div> by mouseover/mouseout?
我有一个容器(主容器),当鼠标悬停在其上时-在主容器附近显示了新容器(附加容器)。 当鼠标悬停在此容器(主容器和附加容器)上时,附加容器仍在屏幕上。 将鼠标移出主容器或附加容器时-隐藏附加容器。 问题:在歌剧添加容器中不要停留在屏幕上。
HTML:
<div style='float:left; width:100px;' class='triggerShowHidePanel' panelID='1'>
--- main content ---
<div class='categoryContainer1' style='float:left; display:none; width:100px;'>
--- addition content ---
</div>
</div>
JS:
$('.triggerShowHidePanel').bind('mouseover', function() {
var positionX = $(this).position().top;
var positionY = $(this).position().left + 100;
$('.categoryContainer' + $(this).attr('panelID')).show();
$('.categoryContainer' + $(this).attr('panelID')).offset({
top: Math.round(positionX),
left: Math.round(positionY)
});
}).bind('mouseout', function() {
$('.categoryContainer' + $(this).attr('panelID')).hide();
$('.categoryContainer' + $(this).attr('panelID')).offset({ top: 0, left: 0 });
});
我添加了一个容器div
将mouseover和mouseout事件绑定到这两个元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.