Show child div on mouse hover of parent - needs javascript?

Question

I need to show a div when you house over its parent (default is for the child div to be hidden). Is the only way to do this with javascript? Thanks

Answer 1

No JS required.

.hidden {
  display: none;
}

.parent:hover .hidden {
  display: block;
}

<div class="parent">
  <p>Hello, I'm a child...</p>
  <p class="hidden">..and so am I but I'm hidden.</p>
</div>

Answer 2

@jdln; yes

css:

.outer {
    background:red;
    height:100px;
}
.box1 {
    background:blue;
    height:100px;
    width:80px;
    display:none;
}
.outer:hover .box1{
    display:block;
    cursor:pointer;
}

check the fiddle: http://jsfiddle.net/sandeep/XLTV3/1/

Answer 3

With jQuery, absolutely:

$("#some_parent").hover(function ()
{
    $(this).children("#some_child_div").show();
});

Answer 4

In addition to the accepted answer, one can use opacity so that layout is not jumping around on hover (this also allows to animate the appearance):

css:

.show-on-hover-parent:hover .show-on-hover-item {
    opacity: 1;
   //transition: opacity .5s; //<- optional opacity animation
}

.show-on-hover-parent .show-on-hover-item {
    opacity: 0;
   //transition: opacity .5s; //<- optional opacity animation
}

html:

<div class="show-on-hover-parent">
    <div>Always visible 1</div>
    <div class="show-on-hover-item">visible on hover</div>
    <div>Always visible 2</div>
</div>

Answer 5

I initially was using css solution above, but had to use jQuery because my child div contained an image which caused hover to flicker. Here we're displaying child when hovering over parent (if desktop screen size) on mouseenter and hiding it on mouseleave but only if now hovering over main page container, to minimize flickering:

$(document).ready(function () {
    $(".parent-qtip").mouseenter(function () {
        if ($(window).width()>=1200)
            $(this).children(".child-qtip").show();
    });
    $(".parent-qtip").mouseleave(function () {
        if ($('.page-content').find('.container:hover').length)
            $('.child-qtip').hide();
    });
});

Answer 6

Using jQuery you can add a mouseover event to the parent div, and show the child div. See this fiddle as an example.

Answer 7

Since it's a child element you don't need javascript. Here is an example.

Answer 8

I was having real trouble with this until I found these answers. I managed to get it working with reference to Marcel's.

My solution is below.

.sidenav {
  position: fixed;
  height: 100%;
  background-color: purple;
  font-size: x-large;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 0px;
}
.nav-item {
  color: white;
  text-decoration: none;
  display: block;
  border-radius: 10px;
  margin: 5px;
  padding: 10px 5px;
  border: 1px transparent solid;
}
.nav-item:hover {
  background-color: orchid;
}
.nav-icon {
  vertical-align: middle;
}
.nav-item-title {
  margin: 0 10px;
  position: relative;
  top: 2px;
}
.fa-circle-question {
  position: relative;
  left: 2px;
}
.hidden {
  display: none;
}
.sidenav:hover .hidden {
  display: inline-block;
}

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
/>
<nav class="sidenav">
  <div class="nav-item">
    <i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
    <h5 class="nav-item-title hidden">
      Medium string
    </h5>
  </div>
  <div class="nav-item">
    <i class="nav-icon fa-solid fa-house"></i>
    <h5 class="nav-item-title hidden">
      Short
    </h5>
  </div>
  <div class="nav-item">
    <i class="nav-icon fa-solid fa-circle-question"></i>
    <h5 class="nav-item-title hidden">
      Much much longer string
    </h5>
  </div>
</nav>