你好 :) 我相对较新于React JS,我正在尝试在一个子div上应用动画,该子div是另一个父div的子元素,“portfolio-product-item
”父div显示从WP REST API提取的特色图像,而子div“portfolio-product-item-details
”则具有文章内容。
我想要做的是当鼠标悬停在父div中的特色图像上时显示内容,我的代码如下,我该如何实现它?
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;