实现悬停信息框

I basically want it so that when the mouse cursor moves out of the calendar cell which is hidden by the info box it will disappear. But I'm having trouble with this because mouseenter and mouseleave get messed up by having the info box as the top element.

所以我尝试通过使用透明的占位符"div 来解决这个问题，它们的形状和位置与其下方的日历单元格相同，并且 z-index 为 1000，因此它们位于信息框上方.然后我将 mouseenter 和 mouseleave 事件应用于这些 div.

So I tried to get around this by using "placeholder" divs that are transparent, have the same shape and location as the calendar cell beneath it, and have a z-index of 1000 so they are above the info box. I then apply the mouseenter and mouseleave events to these divs instead.

这有两个问题.一，我现在在语义上搞砸了我的 HTML.div 没有任何目的，只是为了绕过似乎是一个限制.其次，它们弄乱了我的 jQuery UI 选择(我已将其应用于日历单元格 - 单击不再选择单元格).

There's two problems with this though. One, I have now messed up my HTML semantically. The divs have no purpose but to get around what seems to be a limitation. And secondly, they mess up my jQuery UI selection (I've applied it to the calendar cells - a click no longer selects a cell).

有没有一种简洁的方法来处理显示信息框?不会有用户与信息框交互——它只是显示信息.

Is there a clean way to handle displaying an info box? There will be no user interaction with the info box -- it's just to display information.

编辑:这是一些代码:

<li>
    <div class="day-content">
    </div>
    <div class="day-content-placeholder">
    </div>
</li>

和 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

and Javascript

var popup;
$('.week-content-placeholder')
    .mouseenter(function()
        {
        popup = $('<div class="popup">'+a_lot_of_text+'</div>').insertAfter(this);
        })
    .mouseleave(function()
        {
        popup.remove();
        });