displaying child div on hover on parent div in react js

Question

Hello :) I am relatively new to react js, i am trying to apply animation on a div that is a child of another div, parent div " portfolio-product-item " displays featured image extracted from wp rest api, and child div " portfolio-product-item-details " has the contents of the post.

What i want to do is display the content when hovered over the featured image in parent div , my code is like this , how can i achieve it?

    import React from 'react';
    import Home from './Home';
    require ('../../app.css');
    require ('../../animate.min.css');
    class Portfolio extends React.Component{
      render(){
       console.log(this.props.data.length);
       var contents=[];
       for (var i = 0; i < this.props.data.length; i++) {
       contents.push(
         <div className="col-xs-12 col-md-4">
            <div id="portfolio-product-item" >
              <img src={this.props.data[i].featured_image} />
              <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;

vijayst · Accepted Answer · 2016-09-09 10:58:40Z

9

React allows to add / remove elements from the virtual DOM. Use the onMouseEnter and onMouseLeave to set show / hide state.

<img 
  onMouseEnter={() => this.setState({ show: true })}
  onMouseLeave={() => this.setState({ show: false })} 
/>

Then show / hide details based on the state:

{this.state.show ? 
    <div ref= "productDetails" id ="portfolio-product-item-details"   
         dangerouslySetInnerHTML={{__html: this.props.data[i].content.rendered}}
    />
: null}

answered Sep 9, 2016 at 10:58

vijayst

22.1k18 gold badges73 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

R.K Over a year ago

thank you :) , but i solved it myself, i set the retrieved featured image as background of parent div, and set the proper css on hover and non hover to display the contents of the post which is on child div

vijayst Over a year ago

onMouseLeave will be fired if the user moves over the parent element and then goes to a child element. Not an effective solution.

R.K · Accepted Answer · 2016-09-14 10:36:11Z

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;
}

Collectives™ on Stack Overflow

displaying child div on hover on parent div in react js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related