实现悬停信息框信息

2023-09-07 23:33:33 作者：唐宫梦i

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

I have a calendar, and when the user hovers over a cell, a large-ish info box appears with details for that date. I am having some trouble though making the info box disappear when the user moves away.

我基本上想要它，这样当鼠标光标移出被信息框隐藏的日历单元格时，它就会消失.但是我遇到了麻烦，因为 mouseenter 和 mouseleave 将信息框作为顶部元素搞砸了.

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();
        });

这不是确切的代码，但你明白了.这没问题，但就像我说的，由于 .week-content-placeholder 高于 .week-content，jQuery UI 的选择功能在 .week-content.

That's not the exact code, but you get the idea. This works okay, but like I said, since .week-content-placeholder is above .week-content, the selection capability with jQuery UI doesn't work properly on .week-content.

实现悬停信息框信息

推荐答案