在 react js 中，当父 div 悬停时显示子 div。

4 人关注

你好 :)我对react js比较陌生，我试图在一个div上应用动画，这个div是另一个div的子代，父div " portfolio-product-item " 显示从wp rest api提取的特色图片，而子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;


         
          javascript


         
          wordpress


         
          reactjs


         
          ecmascript-6


           
            
             React允许从虚拟DOM中添加/删除元素。使用onMouseEnter和onMouseLeave来设置显示/隐藏状态。
            
            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}


            
             
              
               
                谢谢你:)但是我自己解决了这个问题，我把检索到的特色图片设置为父div的背景，并在悬停和非悬停时设置适当的css来显示子div上的文章内容。


            
             
              
               
                onMouseLeave将被触发，如果用户在父元素上移动，然后去到一个子元素。这不是一个有效的解决方案。


           
            
             
              
               我的解决方案是这样的
              
              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{