悬停时显示外部 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();
});

Answer 2

这是一个带有 Javascript (JQuery) 版本的代码笔

$(document).ready(
  function(){
    $("#punkt").mouseover(function() {
      $('.content').css('display','block');
    });
    $("#punkt").mouseout(function() {
      $('.content').css('display','none');
    });
});

https://codepen.io/anon/pen/rejdqq?editors=1111

Answer 3

遗憾（幸运地）你不能使用 CSS 在 DOM 树上“导航”。您只能定位下一个兄弟元素和子元素（您可能已经知道）。

JavaScript 可以在这种特定 案例中为您提供帮助：

function showTarget(el) {

  var target = document.querySelector("[data-target='"+  el.dataset.hovershow +"']");

  el.addEventListener("mouseenter", function() {
    target.classList.add("visible");
  });

  el.addEventListener("mouseleave", function() {
    target.classList.remove("visible");
  });

}

[].forEach.call(document.querySelectorAll("[data-hovershow]"), showTarget);

.navigation{ position:fixed; bottom: 30px; }
.content         { display: none; }
.content.visible { display: block; }             /* "visible" class is toggled by JS */

<div class="col">
  <div class="content" data-target="1">1 lorem ipsum</div>
  <div class="content" data-target="2">2 lorem ipsum</div>
</div>

<div class="col">
  <div class="navigation">
    <ul>
      <li><a href="#" data-hovershow="1">1 punkt</a></li>
      <li><a href="#" data-hovershow="2">2 punkt</a></li>
    </ul>
  </div>
</div>

Answer 4

如果您将 .content 的 html 移动到 a 元素的相邻兄弟

.content {
  display: none;
}
.navigation ul li a:hover + .content {
  display: block;
}

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

Answer 5

如果您确定纯 CSS，请查看以下内容： http://jsfiddle.net/raving/87865bq7/

<!-- normally this stuff would be on the html element -->
<!--[if lt IE 7]>  <div class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <div class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <div class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <div class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <div> <![endif]-->
<!--[if !IE]><!--> <div>             <!--<![endif]-->
  <div class="wrapper">
    I have a tooltip.
    <div class="tooltip">I am a tooltip!</div>
  </div>
</div>

CSS：

.wrapper {
  text-transform: uppercase;
  background: #ececec;
  color: #555;
  cursor: help;
  font-family: "Gill Sans", Impact, sans-serif;
  font-size: 20px;
  margin: 100px 75px 10px 75px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 200px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.wrapper .tooltip {
  background: #1496bb;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1496bb 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
}

Answer 6

如果将.content 的html 移动到a 元素的相邻兄弟；将position 的.content 设置为absolute，调整left、top 属性以匹配第一个.col 元素的位置，您应该能够在类似于子元素位置的视口中渲染.content第一个.col 元素；即在a元素之上；或在视口内的任何位置。鉴于 .content display 设置为 none ，.content 是否放置在 html 内的 a 元素旁边并不重要

.col:nth-of-type(1) {
  top: 0px;
  left:0px;
}

.content {
  display: none;
}
.navigation ul li a:hover + .content {
  display: block;
  position: absolute;
  left:0px;
  top: 0px;
}

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

Answer 7

另一种css 方法是使用::before 伪元素，再次设置position:absolute，调整top、left 值以在视口内的特定位置呈现文本或url

a:hover::before {
  content: "lorem ipsum\A";
  position: absolute;
  display:block;
  top:8px;
  left:60px;
  color:green;
}

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