Drop down / Show specific content in one area when hovering other content

Question

I've got a question which I think could help many of us, so let's go.

I made this picture which will sum up exactly what I need: What I need to do

So I need to display content (in my example the big red box with the n°1, since I imagine we are hovering the step 1 part of the picture), according to what the mouse is hovering, in one specific area.

I need this content to push the rest of the page toward the bottom when it displays. Or if it is simpler, the hover content might just drop down over the content of the page. I also need this content to appear with a transition.

Is it possible to do it in pure CSS ? I currently have this :

#hover-content {
    display:none;
}
#parent:hover #hover-content {
    display:block;
}

<div id="parent">
    <div id="original">
    Original content
    </div>
    <div id="hover-content">
       Content displayed when hovering
    </div>
    Some content below, which is pushed to the bottom by the hover content
</div>

This one is not bad but has no transition, and I don't know if I can use it for 4 boxes with different hover content.

And this, which might also help :

#hover-content {
  display:hidden;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
#parent:hover #hover-content {
  visibility: visible;
  opacity: 1;
}

<div id="parent">
  <div id="original">
    My original content
  </div>
  <div id="hover-content">
    The content which displays only when hovering the original content
  </div>
  
</div>
Some content below

This one has a transition but does not drop down and leaves a blank when nothing is displayed...

I guess I'm still far from my goal. Any suggestion ?

Possible duplicate of [How can I transition height: 0; to height: auto; using CSS?](http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css) — sertsedat, Jun 30 '16 at 12:52

theblindprophet · Accepted Answer · 2016-06-30T14:02:32.967

You cannot do this with only CSS. You can only affect other elements by hover if they are direct siblings of the hovered element.

Use a simple JQuery and some attributes. Get the attribute, create the id, and display the element.

HTML (example):

<div id="parent">
    <table>
        <tr>
            <td hover-content="apples">Apples</td>
            <td hover-content="oranges">Oranges</td>
        </tr>
        <tr>
            <td hover-content="limes">Limes</td>
            <td hover-content="blueberries">Blueberries</td>
        </tr>
    </table>
</div>

<div class="hide">
    <div id="apples"> Hello there apples </div>
    <div id="oranges"> Hello there oranges </div>
    <div id="limes"> Hello there limes </div>
    <div id="blueberries"> Hello there blueberries </div>
</div>

CSS:

#parent > table {
    width: 200px;
    height: 100px;
}
#parent > table td {
    width: 50%;
    text-align: center;
    border: 2px solid red;
}
.hide > div {
    display: none;
}

JQuery:

$(document).ready(function() {
    $("#parent td").hover(function() {
        // Get attribute
        var hoverContent = $(this).attr("hover-content");
        console.log(hoverContent);
        // Hide others, remove this for different style of animation
        $(".hide > div").hide();
        // Slide open
        $("#" + hoverContent).stop().slideToggle();
    })
})

Fiddle: https://jsfiddle.net/mo1b0j4k/

This looks exactly like what I needed, thanks a lot. However, is there any way to prevent the strange waves happening when we hover rapidly several blocks ? I don't think it's a big problem, but just in case... — GaletteRaclette, Jun 30 '16 at 13:53
Well, thanks a lot, again, it works perfectly. Really appreciate your help. — GaletteRaclette, Jun 30 '16 at 14:28
Remember to upvote *any* answers that provide you help and select a best answer after some time has surpassed. http://stackoverflow.com/help/privileges/vote-up — theblindprophet, Jun 30 '16 at 14:33

score 0 · Answer 2 · answered Jun 30 '16 at 13:18

Totally possible, you just need to transition the height - see the example below

I've used max-height here, which means you just need to ensure the max-height value under the :hover style just needs to be greater than the height of the hover-content (meaning you don't need to know the exact height to transition to).

#hover-content {
    max-height: 0;
    transition: max-height 1s ease;
    overflow: hidden;
}
#parent:hover #hover-content {
    max-height: 100px;
}

<div id="parent">
    <div id="original">
        Original content
    </div>
    <div id="hover-content">
         Content displayed when hovering
    </div>
</div>

Some content below, which is pushed to the bottom by the hover content

score 0 · Answer 3 · answered Jun 30 '16 at 13:22

This might be another alternative that may help you:

http://codepen.io/adamk22/pen/pbPbBq

#original1,
#original2,
#original3,{
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
  transition: 1s;
}

#hover-content1, 
#hover-content2, 
#hover-content3 {
  width: 100px;
  height: 100px;
  background: blue;
  display: inline-block;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

#original1:hover ~ #hover-content1,
#original2:hover ~ #hover-content2,
#original3:hover ~ #hover-content3,{
  visibility: visible;
  opacity: 1;
}

score 0 · Answer 4 · answered Jun 30 '16 at 20:40

This may be what you are looking for as a pure css solution.

#hover-content {
  display: hidden;
  visibility: hidden;
  opacity: 0;
  height: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
#parent:hover #hover-content {
  display: block;
  height: auto;
  visibility: visible;
  opacity: 1;
}

<div id="parent">
  <div id="original">
    My original content
  </div>
  <div id="hover-content">
    The content which displays only when hovering the original content
  </div>
  
</div>
Some content below

Drop down / Show specific content in one area when hovering other content

4 Answers4