实现悬停信息框

Question

我有一个日历,当用户将鼠标悬停在单元格上时,会出现一个包含该日期详细信息的大信息框.虽然当用户离开时使信息框消失,但我遇到了一些麻烦.

我基本上想要它,以便当鼠标光标移出信息框隐藏的日历单元格时,它将消失.但我有这个麻烦,因为mouseenter并mouseleave得到由具有信息框作为顶级元素搞砸了.

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

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

是否有一种干净的方式来处理显示信息框？用户不会与信息框进行交互 - 它只是为了显示信息.

编辑:这是一些代码:

<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

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

这不是确切的代码,但你明白了.这工作正常,但就像我说的,因为.week-content-placeholder在上面.week-content,jQuery UI的选择功能无法正常工作.week-content.

Answer 1

您可以通过以下方式使用透明的“占位符”div 修改您的解决方案：

使用 使“占位符”潜入“日历单元格”下方{zIndex: -1}。

当您输入日历单元格时，取消隐藏大的“内容”div 并设置{zIndex: 1000}“占位符”div 以将其置于顶部。

在占位符 div 上有一个“mouseout”事件，该事件将隐藏“内容”div 并{zIndex: -1}为“占位符”单元格设置。

您可以在 JavaScript 中创建一个“占位符”单元格，然后在“鼠标插入”时将其移动到每个“日历”单元格的位置，而不是在 HTML 中创建“占位符”单元格。您还可以将“日历单元格”上的任何“点击”事件复制到此单元格上。

让我知道这个是否奏效。