javascript - 悬停时显示外部 div

Question

我创建了一个导航，现在我想添加一个预览器来获取相关选项。

此 div 未连接到导航，但它需要在悬停时显示。经过“数小时”的研究，我投降了:/

这是我的简化代码

https://codepen.io/solevita/pen/JXEOQg

<div class="col">
  <div class="content">lorem ipsum</div>
</div>
<div class="col">
  <div class="navigation">
    <ul>
      <li><a href="#">punkt</a></li>
    </ul>
  </div>
</div>

如前所述，我要显示的 div 不在导航中(出于响应原因)。

是否可以使用纯 css 来处理这个问题，或者是否需要 javascript？我希望情况并非如此 - 我的 javascript 技能不存在 :D

感谢您的帮助!

Answer 1

如果您不想修改任何现有标记，则可能需要使用 JavaScript 来完成。 '+' 选择器仅适用于 DOM 中同一级别的元素。由于您用来触发内容 div 显示的元素在 DOM 中与内容 div 本身不在同一级别，因此此方法将不起作用。如果我理解正确，那么您可以使用以下 jQuery 来完成您想要做的事情:

$('.navigation a').hover(function(e) {
  $('.content').show();
}, function(e) {
  $('.content').hide();
});