하위 디바 표시 상위 디바 반응 js에서 하위 디바 호버링

하위 디바 표시 상위 디바 반응 js에서 하위 디바 호버링

안녕하세요 :) js 반응은 비교적 처음입니다, 다른 디브, 부모 디브의 자녀인 디브에 애니메이션을 적용하려고 합니다"portfolio-product-item" wp rest api에서 추출된 특징 이미지 및 child div "를 표시합니다.portfolio-product-item-details" 게시물의 내용을 가지고 있습니다.

제가 하고 싶은 일은 부모 디브의 특징 이미지 위에 떠 있을 때 내용을 표시하는 것입니다. 제 코드는 이렇습니다. 어떻게 하면 달성할 수 있을까요?

    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;

React를 사용하면 가상 DOM에서 요소를 추가/제거할 수 있습니다.onMouseEnter 및 onMouseLeave를 사용하여 show/hide 상태를 설정합니다.

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

그런 다음 상태에 따라 세부 정보를 표시/숨깁니다.

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

저의 해결책은 이런 것이었습니다.

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;

그리고 CSS 규칙은 이렇습니다.

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

언급URL : https://stackoverflow.com/questions/39409379/displaying-child-div-on-hover-on-parent-div-in-react-js