鼠标悬停时显示外部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

感谢您的帮助！

- Chumminerd

---

我不相信这可以通过纯CSS实现。但是使用JavaScript非常容易，只需在“触发”元素上设置事件处理程序即可。并且请将所有代码都放在此处而不是CodePen上。 - Carcigenicate

Answer 1

如果您不想修改任何现有的标记，您可能需要使用JavaScript来完成这个任务。'+'选择器只能用于DOM中同一级别的元素。由于您用于触发显示内容div的元素与内容div本身不在DOM中的同一级别上，因此此方法将无法工作。如果我理解正确，您可以使用以下jQuery来实现所需功能：

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

- Jimmy

Answer 2

这里有一个包含Javascript（JQuery）版本的Codepen。

$(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

- frazras

Answer 3

如果您确定要使用纯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;
}

- ErTR

---

这对于这个任务来说有些过度了，但我认为不应该给它点踩。 - Carcigenicate

“如果你确定使用纯CSS”，那么它是否有效？是的。但似乎有人声望太高了，而且没有解释为什么会被踩。我喜欢人们！3< - ErTR

@Ertürk Öztürk - 谢谢分享，非常有用。我通过谷歌搜索“纯CSS工具提示”，然后再搜索列出jsfiddle链接的页面找到了它。 - fzzylogic

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>

- guest271314

---

由于特定原因，内容未嵌套在UL中。 - Roko C. Buljan

@RokoC.Buljan “由于特定原因，内容未嵌套在UL内。”好吧，为什么“踩”可能的解决方案？在另一个问题/答案中，您已经自由地添加了额外的内容到答案https://dev59.com/3pXfa4cB1Zd3GeqPaiSx#36046964/?不要做伪君子。 - guest271314

我宁愿说可能的解决方案是使用JS，而不是无法使用CSS完成;) - Roko C. Buljan

@RokoC.Buljan，恕我直言，您的“downvote”理由绝对是虚伪的，因为您在https://dev59.com/3pXfa4cB1Zd3GeqPaiSx#36046964/提供的解决方案中添加了未出现在实际问题中的文本。提供了一个可能使用`css`的解决方案。如果元素设置为`display:none`，那么元素在`html`中是否紧挨着`a`元素又有什么关系呢？ - guest271314

@Chumminerd 注意，您应该能够将 .content 元素的 position 设置为 absolute，调整 left 和 top 属性以在第一个 .col div 的子元素类似的位置呈现 .content。 - guest271314

我仍然相信你的例子是用纯CSS实现的唯一方法。没有什么需要猜测的。 - Roko C. Buljan

Answer 5

不幸的是（幸运的是），您不能使用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>

- Roko C. Buljan

---

谢谢，你的回答是最有用的。能够显示不同的div选项真是太好了。顺便提一下：JavaScript必须在body标签关闭之前实现，否则它无法工作。当我错了时，请纠正我，Roko C. Buljan ：D - Chumminerd

@Chumminerd，你说得完全正确。如果不使用 DOMContentLoaded 回调（在 jQuery 中称为 document.ready），则需要将 <script> 标签放在关闭的 </body> 之前。不客气。 - Roko C. Buljan

Answer 6

如果您将.content的html移到邻近的a元素作为兄弟节点；将.content的position设置为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>

- guest271314

---

很酷的解决方案。如果.content元素需要重叠以实现漂亮的淡入淡出效果（那么无论如何它们都必须是absolute定位）。 - Roko C. Buljan

你可以采用click和radio元素的组合，或者使用click和:target伪类来获得另一种解决方案。 - Roko C. Buljan

是的，尝试使用:target，但可能需要除:hover之外的用户操作。 - guest271314

没有其他办法。您可以转到下一个问题 :) - Roko C. Buljan

@RokoC.Buljan：“没有其他办法。”请查看使用::before伪元素的新答案。 - guest271314

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>

- guest271314

---

дҪ иғҪеҗҰдҪҝз”ЁCMSжҸ’е…ҘеҶ…е®№пјҹеңЁ:afterжҲ–иҖ…:beforeдјӘе…ғзҙ дёӯдҪҝз”ЁHTMLж ҮзӯҫжқҘжҸ’е…Ҙе’Ңи®ҫзҪ®ж ·ејҸйғҪеҫҲе®№жҳ“гҖӮ - Roko C. Buljan

真的吗？你尝试过使用 :after 或 :before 伪元素插入来自 page.html 的 HTML 吗？ - Roko C. Buljan

好的，文本需要进行转义，而url()或attr()不解析html，尽管可以将文本呈现为类似于html文档的形式；通常情况下，content期望的是文本。例如，如果截取了一个html文档的屏幕截图，则该图像可以呈现在content中，否则将呈现文本。https://jsfiddle.net/95yoff8e/1/ - guest271314

为什么使用“愚蠢”的术语？这是必要的吗？我们正在讨论内容可以弯曲到多大程度，这有什么“愚蠢”的地方吗？ - guest271314

好的，http://jsbin.com/zozetaj/1/edit?html,css,js,output 请自行查看。这是我从有效URI获取内容的努力。AJAX完美地完成了工作，但显然content：url（不）。 - Roko C. Buljan