How to Show the Child Div on Mouse Hover of Parent Div

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

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>

Show child element on parent hover in CSS

if you have styled hide like this (the page will be displayed as if the element is there but not seen):

#parent .hidden-child{
    visibility: hidden;
}

you may do it like this to just hide it:

#parent:hover .hidden-child{
    visibility: visible;
}

and if you have styled it like this (the page will be displayed as if the element is not there):

#parent .hidden-child{
    display: none;
}

you may do it like this:

#parent:hover .hidden-child{
    display: block;
}

In Action!

#parent {
    width: 10rem;
    height: 10rem;
    background-color: #ababab;
}

#parent .hidden-child{
    visibility: hidden;
}

#parent:hover .hidden-child{
    visibility: visible;
}

<div id="parent">
    <button class="hidden-child">Delete</button>
</div>

How to show the child div on mouse hover of parent div

If you want pure CSS than you can do it like this....

In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.

.hotqcontent {
   display: none;
   /* I assume you'll need display: none; on initialization */ 
}

.parent_div:hover .hotqcontent { 
   /* This selector will apply styles to hotqcontent when parent_div will be hovered */
   display: block;
   /* Other styles goes here */
}

Demo

Hidden child div visible on mouseover of parent

Attach a :hover event to .parent, select the child .child3 and change its visibility property to visible.

.parent > .child3 {  visibility: hidden;}.parent:hover > .child3 {  visibility: visible;}

<div class="parent">    <div class="child1">A</div>    <div class="child2">B</div>    <div class="child3">C</div></div>

How to get element to display on hover of parent?

The reason the hover stops is that there is a gap below the #one lis where there's nothing to hover over. Change .one {top:85px;} to .one {padding-top:15px;} or amount is appropriate to allow for there to be something to hover over.

Also, if you want to fine-tune how far down from the top that the padding begins, you can use a combination of padding-top and top such as .one{padding-top:25px;top:60px} so that the dropdown content starts at 85px from the top.

$(function() {  $('li#one').hover(function() {    var el_two = $(this);    var el_id = el_two.attr('id');    var el_link = el_two.attr('data-at');    var el_sel = '#' + el_link + '.' + el_id;
    $(el_sel).toggleClass('is-active');  });});

.menu__container {  margin: 0 auto;  padding: 10px;}
.two {  display: none;}
.is-active {  display: block;}
.one {  display: none;  top: 60px;  padding-top: 25px;  position: absolute;  background: #777;}
li#one>a {  padding: 10px;  background-color: #eee;}
.menu__first {  background-color: #eee;}
#one:hover>div.one {  display: block;}
#one {  float: left;  display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu__container">  <ul class="menu__first">    <li id="one">      <a href="#"> first</a>      <div class="one">        <ul>          <li data-at="some-link" id="two">            <a href="#"> some</a>          </li>          <li data-at="path-link" id="two">            <a href="#"> path</a>          </li>          <li data-at="another-one" id="two">            <a href="#"> another one</a>          </li>        </ul>        <div class="dropdown">          <div class="two" id="some-link">some link text</div>          <div class="two" id="path-link">path link</div>          <div class="two" id="another-one">another one</div>        </div>      </div>    </li>    <li id="one">      <a href="#"> second</a>      <div class="one">        <ul>          <li>            <a href="#"> another some</a>          </li>          <li>            <a href="#"> another path</a>          </li>        </ul>      </div>    </li>    <li id="one">      <a href="#"> third</a>      <div class="one">        <ul>          <li>            <a href="#"> third some</a>          </li>          <li>            <a href="#"> third path</a>          </li>        </ul>      </div>    </li>  </ul></div>

How to prevent the mouseover of parent element when the cursor leaves child element to hover parent element?

Switch to using the mouseenter event.

<div id="parent" onmouseenter="console.log('foo');" style="width:100px;height:100px;background-color:blue;">  <div id="child" style="width:50px;height:50px;background-color:red;"> </div>
</div>

displaying child div on hover on parent div in react js

My solution was something like this

import React from 'react';
import Home from './Home';
require ('../../app.css');
require ('../../animate.min.css');
class Portfolio extends React.Component{
  render(){
  var contents=[];
  for (var i = 0; i < this.props.data.length; i++) {
    var productImage ={
      backgroundImage:'url('+ this.props.data[i].featured_image + ')',
      backgroundSize: '100% 100%'
    }
    contents.push(
      <div className="col-xs-12 col-md-6 col-lg-4">
          <div  id="portfolio-product-item" style ={productImage} >

            <div  ref= "productDetails" id ="portfolio-product-item-details"  dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}} />
          </div>
      </div>
    );
  }
    return(
      <div className = "container">
          <div className="row">
            <section className="portfolio">
               <h1>Our Latest Work</h1>
               <p id="below-header">These are some of the works that has been keeping us busy over the years. See for yourself what we can do.</p>
               <div className="col-xs-12 ">
                  {contents}
               </div>
            </section>
          </div>
      </div>
    )
  }
}
export default Portfolio;

and css rules were like this

  section.portfolio div#portfolio-product-item{
  height:370px;
  width:100%;
  background: #f0f0f0;
  margin:15px;
  position:relative;
  transform: rotate(4deg) ;
  box-shadow: 5px 5px 5px #909090;
  -webkit-font-smoothing: antialiased;
}
section.portfolio div#portfolio-product-item-details{
  height:100%;
  width:100%;
  padding:10px;
  text-align: center;
  color:#ffffff;
  position: absolute;
  top:0;
  background-color: #000000;
  opacity:0;
}
section.portfolio div#portfolio-product-item-details:hover{
  cursor:pointer;
  opacity:0.9;
  transition: all .5s ease-in-out;
}

How to open a child div on hover parent?

There is no onmouseover event in Angular, you can use built-in mouseenter and mouseleave Angular events instead:

<button
  (mouseenter)="openCurrentOrder(item)"
  (mouseleave)="closeCurrentOrder(item)"
  (click)="toggleCurrentOrder(item)">
  Click/Hover here to open order {{item.id}}
</button>

STACKBLITZ

How to apply CSS on child element when hover parent element?

Remove the +

 #DraggableImage:hover .onHover{
      display: block;
    }

---

Related Topics