实现悬停信息框

2022-01-22 00:00:00 hover jquery javascript

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

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.

推荐答案

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

You could modify your solution with the transparent "placeholder" divs in the following way:

使用 {zIndex: -1} 将占位符"置于日历单元"下方.

Have the "placeholder" dive underneath the "calendar cell", using {zIndex: -1}.

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

When you enter a calendar cell, unhide the large "content" div and set {zIndex: 1000} on the "placeholder" div to bring it to the top.

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

Have a "mouseout" event on the placeholder div that will hide the "content" div and set {zIndex: -1} for the the "placeholder" cell.

您可以在 javascript 中创建一个占位符"单元格，而不是在 HTML 中创建一个占位符"单元格，然后在鼠标输入"它时将其移动到每个日历"单元格的位置.您也可以将日历单元"上的任何点击"事件复制到该事件上.

Rather than create the "placeholder" cells in the HTML, you could create one in the javascript and move it to the postion of each "calendar" cell as you "mouseIn" it. You could also duplicate any "click" events on the "calendar cell" onto this one as well.

让我知道这是否有效.

相关文章