在悬停时显示外部div

Question

i created a navigation and now i want to add a previewer to get related options.

this div isnt connected to the navigation but it needs to show up on hover. i surrendered after "hours" of researching :/

Here is my simplified code

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>

as already told, the div I want to show is not in the navigation (for responsive reasons).

Is it possible to handle this with pure css or is javascript necessary? I hope this is not the case - my javascript skills are not existent :D

thanks for your help!

Answer 1

If you don't want to modify any existing markup, you'd likely need to do this with JavaScript. The '+' selector will only work with elements that are on the same level in the DOM. Since the element you're using to trigger the showing of the content div is not on the same level in the DOM as the content div itself, this method will not work. If I am understanding this correctly, what you are trying to do can be accomplished with the following jQuery:

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

Answer 2

Here is a codepen with the Javascript (JQuery) version

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

If you move html of .content to be adjacent sibling of a element

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

If you are sure about pure css, check this out: 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

Sadly (luckily) you cannot "navigate" using CSS up the DOM tree . You can only target next siblings and child elements (as you probably already know).

JavaScript can help you in this specific case:

 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 6

If you move html of .content to be adjacent sibling of a element; set position of .content to absolute , adjust left , top properties to match position of first .col element , you should be able to render .content within viewport similar to position of a child element of first .col element; that is , above a element; or at any position within viewport. Given that .content display is set to none , it should not matter if .content is placed next to a element within html

 .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

Another css approach would be to utilize ::before pseudo element, again setting position:absolute , adjusting top , left values to render text or url at specific position within viewport

 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>