实现悬停信息框答案

【问题标题】：Implementing a hover info box实现悬停信息框
【发布时间】：2011-01-25 18:40:15
【问题描述】：

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

我基本上想要它，这样当鼠标光标移出被信息框隐藏的日历单元格时，它就会消失。但我遇到了麻烦，因为 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 上无法正常工作。

【问题讨论】：

了解日历的 html 是什么可能有助于回答这个问题。
嗯，这不是一个非常具体的日历问题。它只是一个具有 mouseenter 事件的 div，该事件会在其旁边附加另一个 div。这个 div 有很大的宽度和高度，但它现在遮住了它下面的 div，阻止了它的 mouseleave 事件。
尼克，你为什么不使用 CSS“位置”将你的信息框放在屏幕上，这样它就不会完全挡住日历单元格？
是的，我知道。但它有助于了解您正在使用哪些元素来为您的问题提供有用、具体、不仅仅是插件库的答案。
这确实是设计的一部分。日历的每个单元格中的文本都太小了，因此用户将鼠标移到那里，单元格上方的弹出窗口大到足以容纳大量的信息。如果我将弹出窗口移动到不同的位置，它可能会使用户混淆它对应的内容。

标签： javascript jquery hover

【解决方案1】：

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

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

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

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

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

让我知道这是否有效。

【讨论】：

谢谢，效果很好！我有一个问题。有时，当我在日历上快速移动鼠标时，它不会为占位符 div 注册 mouseout 事件，并且多个信息框会留在屏幕上。我必须返回并鼠标悬停它，然后再次鼠标移出以使其消失。但是你回答了我的问题——谢谢。
也许可以尝试先显示“占位符”，然后在 1 秒内“淡入”内容，以便有更多时间来注册活动。对于这样的事情，我更喜欢淡入淡出；它不那么刺眼。
对不起，我意识到我的最后评论与您的要求相反。尝试将“占位符”保留在 {zIndex: 1000} 并将日历单元格的“点击”事件复制到它。
另一种方法是使用“timeOut”将“内容”延迟显示四分之一秒，这会使用户在遍历单元格时减慢鼠标移动速度。“mouseout”如果内容尚未开始，事件可以调用 clearEvent 来禁止显示内容。
最后一条评论。查看有关“.stop()”和“.delay()”的 jQuery 文档。我认为这些对你想做的事情很有用。

【解决方案2】：

这里的诀窍是让信息框成为单元格的子项：

<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/

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

【讨论】：

非常酷的技术，它将“内部”信息在语义上关联到它适用的框内。但是，当我尝试小提琴时，当我的鼠标离开 #box 矩形的范围时，它并没有隐藏 #inner - 它直到我鼠标移出 #inner 时才隐藏 - 这留下了与我相同的问题建议。
感谢所有的工作！但它不太适合我想要做的事情，即当鼠标移出#box 时让#inner 消失。在您的示例中，我必须将鼠标移到 #inner 之外才能发生悬停功能（这意味着如果 #inner 是 500x500，那么我必须将鼠标移动很远才能发生悬停）。我确实喜欢这样做在语义上正确的方式，因此可以回答我的问题的一部分。

【解决方案3】：

这里有 15 个不同的插件可以让你用 jquery 做到这一点：

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

【讨论】：

谢谢。我已经搜索了这些类型的插件，但它们都不适合我想要做的事情，即完全覆盖光标所在的项目，同时仍然响应该项目的 mouseleave 事件。除非我错过了，否则我不相信这 15 部作品中的一部（它们抵消了工具提示）。

【解决方案4】：

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

【讨论】：

这正是我想要的！我将如何准确跟踪鼠标移动？

【解决方案5】：

如果您按照您所描述的那样进行这项工作，那么鼠标在日历单元格内的微小移动（甚至不可见）会使弹出窗口保持原位，但退出单元格的稍大的移动会使弹出窗口消失。

p>

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

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

您可以通过在创建 div 时将 .mouseleave() 处理程序添加到 div 来做到这一点。

【讨论】：

您的第一段准确地描述了我正在尝试做的事情，实际上我最初完全按照您的描述实现了它。然而，“工具提示”占用了太多空间，几乎完全覆盖了被悬停的日历单元格旁边的日历单元格，这意味着如果用户想要查看下一个单元格的工具提示，他们必须走到最边缘它（有时它被完全覆盖）。