实现一个悬停信息框 [英] Implementing a hover info box

问题描述

我有一个日历，当用户将鼠标悬停在单元格上时，会显示一个大型信息框，其中包含该日期的详细信息。我有一些麻烦，虽然使用户离开时信息框消失。

我基本上想要它，以便当鼠标光标移出日历单元格信息框隐藏它将消失。但是我遇到了麻烦，因为通过将信息框作为顶层元素， mouseenter 和 mouseleave 。

所以我试图通过使用placeholderdiv来解决这个问题，这个div是透明的，与它下面的日历单元具有相同的形状和位置，并且有一个z 1000的索引，因此它们位于信息框之上。然后，我将 mouseenter 和 mouseleave 事件应用于这些div。

虽然这有两个问题。其一，我现在已经搞乱了我的HTML语义。该divs没有目的，只是为了解决似乎是一个限制。其次，他们搞砸了我的jQuery UI选择（我已经将它应用到日历单元格 - 点击不再选择单元格）。

是否有干净的方式处理显示信息框？没有用户与信息框交互 - 只是显示信息。

编辑：以下是一些代码：

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

和CSS

  li 
 {position：absolute;宽度：15％;身高：20％; top：... left：...} 
 .day-content 
 {position：absolute;宽度：100％;身高：100％; } 
 .day-content-placeholder 
 {position：absolute;宽度：100％;身高：100％; z-index：1000; } 
 .popup 
 {position：absolute;宽度：300％;身高：300％;左：-150％;顶部：-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 中无法正常工作。

解决方案

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

让占位符潜入日历单元格下方， {zIndex：-1} 。

当您输入日历单元格时，取消隐藏较大的内容请在占位符div上设置 {zIndex：1000} 以将其带到顶端。

鼠标悬停的事件，它会隐藏内容div，并为占位符单元格设置 {zIndex：-1} 。

与其在HTML中创建占位符单元格，您可以在javascript中创建一个单元格，并将它移动到每个日历单元格的位置，如同mouseIn一样。您也可以将日历单元格上的任何单击事件复制到这一个。

让我知道这是否有效。

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.

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.

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.

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.

EDIT: Here is some code:

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

and 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; }

and Javascript

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

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.

解决方案

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

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

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.

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

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.

Let me know if this works.

这篇关于实现一个悬停信息框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！