Question

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

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

这是我的简化代码

<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）版本的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

Answer 3

如果您将html的{{1}}移动为.content元素的相邻兄弟

＆＃13;

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

＆＃13;

Answer 4

如果您对纯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 5

可悲的（幸运的是）你不能＆＃34;导航＆＃34;使用 CSS 向上添加DOM树。你只能瞄准下一个兄弟姐妹和孩子元素（你可能已经知道了）。

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

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

如果您将html的{{1}}移动为.content元素的相邻兄弟;将a的{{1}}设置为position，调整.content，absolute属性以匹配第一个left元素的位置，您应该能够渲染视口中的top类似于第一个.col元素的子元素的位置;也就是说，高于.content元素;或在视口内的任何位置。鉴于.col a设置为.content，如果display位于none .content元素旁边，则无关紧要>

html

Answer 7

另一种css方法是利用::before伪元素，再次设置position:absolute，调整top，left值以呈现文字或{{1在视口中的特定位置

＆＃13;

url

＆＃13;

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

＆＃13;

在悬停时显示外部div

7 个答案: