Question

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

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

Answer 1

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

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

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

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

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

让我知道这是否有效。

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

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

Answer 3

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

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

Answer 4

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

Answer 5

如果按照描述的方式进行此操作，仍然保留在日历单元格中的微小鼠标移动（甚至不可见）会使弹出窗口保持原位，但是从单元格中移出的稍大的移动会使弹出窗口消失。

用户只看到弹出窗口内的移动 - 弹出窗口内的小移动使其保持原位;大运动使它消失。

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

您可以在创建div时为其添加.mouseleave()处理程序。

实现悬停信息框

5 个答案: