将鼠标悬停在元素上但不出现在鼠标指针上时，如何显示 div？

Question

我在一个页面中有多个元素，将鼠标悬停在一个元素上会显示另一个 div。示例代码在 jsfiddle 中。问题是当光标向右移动时，这个 div 会覆盖光标下方的内容。有什么方法可以使 div 不受影响？在这种情况下，div 应该在下半部分或左侧。

我是否测试光标位置并根据光标位置重新定义隐藏 div 的位置？或者有什么内置的东西可以做到吗？谢谢

<div class="container">
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>
  <div class="box"></div><div class="box"></div>

  <div class="flyout hidden"></div>
</div>

https://jsfiddle.net/p89ag5zu/2/

Answer 1

您可以使用 JavaScript 来跟踪鼠标移动并在弹出窗口上应用定位类。这是相当低效的，但它有效：

https://jsfiddle.net/p89ag5zu/3/

var $container = $('.container');
// This would be much faster if you throttle calls to the handler.
// Google "JavaScript event throttling" for examples.
$container.on('mousemove', function (e) {
  // This would be much faster if you store the container offset values.
  // Note that you might need to re-calculate when the screen size changes.
  if ((e.clientX - $container.offset().left) < $container.width() / 2) {
    $flyout.removeClass('left');
    $flyout.addClass('right');
  }
  else {
    $flyout.removeClass('right');
    $flyout.addClass('left');
  }
  if ((e.clientY - $container.offset().top) < $container.height() / 2) {
    $flyout.removeClass('top');
    $flyout.addClass('bottom');
  }
  else {
    $flyout.removeClass('bottom');
    $flyout.addClass('top');
  }
});

将鼠标悬停在元素上但不出现在鼠标指针上时，如何显示 div？

How to have a div show up when hovering over elements but not appear over the mouse pointer?

html

javascript

css

jquery