实现hover信息框
我有一个日历，当用户将鼠标hover在单元格上时，会出现一个包含该日期详细信息的大信息框。 虽然当用户离开时使信息框消失，但我遇到了一些麻烦。
我基本上想要它，以便当鼠标光标移出信息框隐藏的日历单元格时，它将消失。 但是我遇到了麻烦，因为通过将信息框作为顶部元素， mouseenter和mouseleave离开了。
所以我尝试通过使用透明的“占位符”div，与其下面的日历单元具有相同的形状和位置，并且z-index为1000，因此它们位于信息框上方。 然后我将mouseenter和mouseleave事件应用于这些div。
但是这有两个问题。 一，我现在已经在语义上弄乱了我的HTML。 div没有任何目的，只能绕过似乎是一种限制。 其次，他们搞砸了我的jQuery UI选择（我已经将它应用到日历单元格 – 点击不再选择单元格）。
是否有一种干净的方式来处理显示信息框？ 用户不会与信息框进行交互 – 它只是为了显示信息。
编辑 ：这是一些代码：
和CSS
li { position: absolute; width: 15%; height: 20%; top: ... left: ... } .day-content { position: absolute; width: 100%; height: 100%; } .day-content-placeholder { position: absolute; width: 100%; height: 100%; z-index: 1000; } .popup { position: absolute; width: 300%; height: 300%; left: -150%; top: -150%; z-index: 500; }
和Javascript
var popup; $('.week-content-placeholder') .mouseenter(function() { popup = $(''+a_lot_of_text+'').insertAfter(this); }) .mouseleave(function() { popup.remove(); });
这不是确切的代码，但你明白了。 这没关系，但就像我说的那样，因为.week-content-placeholder高于.week-content ，jQuery UI的选择function在.week-content上无法正常工作。
您可以通过以下方式使用透明的“占位符”div修改您的解决方案：
使用{zIndex: -1}让“占位符”潜入“日历单元格”下方。
当您输入日历单元格时，取消隐藏大的“内容”div并在“占位符”div上设置{zIndex: 1000}以将其置于顶部。
在占位符div上有一个“mouseout”事件，它将隐藏“content”div并为“占位符”单元格设置{zIndex: -1} 。
您可以在javascript中创建一个“占位符”单元格，然后将其移动到每个“日历”单元格的位置，而不是“鼠标”。 您还可以将“日历单元”上的任何“点击”事件复制到此日期。
让我知道这个是否奏效。
这里的技巧是使信息框成为单元格的子项：
Normal content This big box obscures everything in the cell!
内部框被隐藏，直到hover发生。 注意如何使用CSS我们可以使框大于具有负边距的单元本身。
#box { width:100px; height:100px; margin:100px; border:solid 2px darkblue; position:relative; } #box #inner { display:none; position:absolute; background-color:#eeee00; top:-10px; left:-10px; width:120px; height:120px; }
并且您可以使用普通的jqueryhover，因为hover覆盖框和它的子框：
$('#box').hover(function(){ $('#inner').show(); },function(){ $('#inner').hide(); });
这是运行：
您可以像在代码中一样动态创建信息框。
这里有15种不同的插件可以让你用jquery做到这一点：
http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/
你可以跟踪mousemouse并使用你的hover触发器的offsetLeft + width和offsetTop + height对event.pageX和event.pageY进行比较。
如果按照描述的方式进行此操作，仍然保留在日历单元格中的微小鼠标移动（甚至不可见）会使弹出窗口保持原位，但是从单元格退出的稍大的移动会使弹出窗口消失。
用户只看到弹出窗口内的移动 – 弹出窗口内的小移动使其保持原位; 大运动使它消失。
我建议在退出弹出div本身时触发弹出窗口的消失。 保留在“尖端”面板内的任何移动都会将其留下。 我认为（1）这是更好的可用性和（2）它避免了模糊的日历单元事件处理的整个问题。
您可以通过在创建div时.mouseleave()添加.mouseleave()处理程序来实现。