实现悬停信息框

Question

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

我基本上想要它，这样当鼠标光标移出信息框隐藏的日历单元格时，它就会消失。但我在这方面遇到了麻烦，因为 mouseenter 和 mouseleave 由于将信息框作为顶部元素而变得混乱。

因此，我尝试通过使用透明的“占位符”div 来解决此问题，其形状和位置与其下方的日历单元格相同，并且 z 索引为 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-placeholder 上无法正常工作。代码>.week-content。

Answer 1

这里的技巧是使信息框成为单元格的子元素：

<div id='box'>
    Normal content
    <div id='inner'>
        This big box obscures everything in the cell!
    </div>
</div>

内部框隐藏直到发生悬停。请注意，我们如何使用 CSS 使框比单元格本身更大，并且边距为负。

#box
{
  width:100px;
  height:100px;
  margin:100px;
  border:solid 2px darkblue;
  position:relative;
}
#box #inner
{
  display:none;
  position:absolute;
  background-color:#eeee00;
  top:-10px;
  left:-10px;
  width:120px;
  height:120px;
}

您可以使用普通的 jquery 悬停，因为悬停覆盖了框及其子框：

$('#box').hover(function(){
    $('#inner').show();
},function(){
    $('#inner').hide();
});

这是它的运行情况：

http://jsfiddle。 net/RbqCT/

您可以像在代码中一样动态创建信息框。

Answer 2

这里有 15 个不同的插件，可让您使用 jquery 执行此操作：

http://www.webdesignbooth .com/15-jquery-plugins-to-create-an-user-friend-tooltip/

Answer 3

您可以跟踪 mousemouse 并使用悬停触发器的 offsetLeft + width 和 offsetTop + height 与 event.pageX 和 event.pageY 进行比较。

Answer 4

如果您按照您所描述的方式进行此工作，则保留在日历单元格内（甚至不可见）的微小鼠标移动会将弹出窗口保留在适当的位置，但是退出单元格的稍大的移动会使弹出窗口消失。

用户只能看到弹出窗口本身的移动——弹出窗口内的微小移动会将其保持在原位；大的运动使它消失。

我建议在退出弹出窗口 div 本身时触发弹出窗口的消失。任何留在“提示”面板内的移动都会将其保留。我认为（1）这是更好的可用性，（2）它避免了模糊日历单元事件处理的整个问题。

您可以通过在创建 div 时添加 .mouseleave() 处理程序来实现此目的。

Answer 5

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

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

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

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

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

让我知道这是否有效。