Displaying div on hover in a different place

Question

I know how to display one div when you hover over another using the CSS:

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

But the new div is displayed underneath the hover div. How can i have a div that when you hover it, displays another div that may be somewhere else on the page e.g above the hover one. Rather than it displaying under the hover div.

Answer 1

You can do something like this:

.showhim{
    margin-top:50px;
}

.showme {
  display: none;
}

.showhim:hover .showme {
display:block;
border:1px solid red;
position:absolute;
top:0;
left:0;
font-size:25px;
}

<div class="showhim">HOVER ME 
    <div class="showme">hai</div>
</div>

Answer 2

If your HTML still looks like

<div class="showhim">HOVER ME
    <div class="showme">hai</div>
</div>

In that case, you can just assign an absolute or fixed position to the div with class showme and still use the same CSS.

If the showme div cannot be a child of the showhim div, then you can try placing it as a sibling.

<div class="showhim">HOVER ME</div>
<div class="showme">hai</div>

Once that is done, you can modify your CSS in the following manner

.showme {
    display: none;
}

.showhim:hover ~ .showme {
    display: block;
}

The ~ can be used to select sibling elements that appear after the current element.

Answer 3

Basically you want to shift the child div above its parent when the parent is hovered. If you know about positioning then you can use it. If you don't know then follow this code snippet.

      div{
        height: 30px;
      }
      .parent:hover .child{
        position: relative;
        bottom: 30px;
      }
      .parent:hover + .brother{
        position: relative;
        left: 30px;
      }

  <div class="parent">
        hoverme
        <div class="child">hi</div>
  </div>
  <div class="brother">brother</div>

Here I assigned the child a relative position which allows you to move it relative to its current position and bottom property pushes it above 30px. Here if you don't want any overlapping then you will have to keep account for the height of parent or in this case parent div. relative position will be better then absolute. Also sibling movement is possible and is shown in the css.

Answer 4

If Javascript is an option, you can easily toggle the display property like this:

var showmeElement = document.getElementsByClassName('showme')[0];

function toggleSibling(shouldShow) {
  if(shouldShow) {
    showmeElement.style.display = 'block';
  } else {
    showmeElement.style.display = 'none';
  }
}

.showme {
  display: none;
}

<div class="showme" onmouseover="toggleSibling(true)" onmouseout="toggleSibling(false)">B</div>
<div class="showhim" onmouseover="toggleSibling(true)" onmouseout="toggleSibling(false)">A</div>

Otherwise, with CSS, the only way to target showme using showhim is by sibling / children selectors, with showhim being higher in hierarchy (children) or simply higher in DOM (as siblings).

Keep in mind that CSS can not go upwards in DOM in order to style elements conditionally, but only downwards.