如何在 ReactJS 中使用叠加效果？答案

【问题标题】：How to use overlay effect in ReactJS?如何在 ReactJS 中使用叠加效果？
【发布时间】：2018-09-15 18:46:52
【问题描述】：

如何在 ReactJS 中使用图像叠加？我正在制作一个电影网站。这是链接：Project 当用户将鼠标悬停在图像上时，我想使用叠加效果。当用户将鼠标悬停在图像上时，我想在图像上显示带有叠加效果的标语。这是我尝试过的链接：reference 但是，它在 React 中不起作用。这是代码：在图像标签中我想添加叠加效果。

    <div className="main-description"   >                                                                                                 
    <img src={"https://image.tmdb.org/t/p/w500"+res.poster_path} 
    className="result- image"/>

    <b className="result-titles"  >{res.original_title}</b>


    <div className="extra-description">

    <div className="rating_time_score_container">

    <div className="sub-title Rating-data"><b>

    Imdb

    <span className="details" > {res.vote_average}/10 </span></b></div>

    <div className="time-data">

    <b><span className="time">

    <i className="fa fa-clock-o"></i> </span> <span className="details">                                                
    {res.time_str}</span>

    </b>

   </div>


   </div>

   </div>

【问题讨论】：

你应该提供一些代码。

标签： css reactjs

【解决方案1】：

我认为这与 CSS 无关，如果有一个指向您的 github 的链接会很不错，但是我\我追踪了您的代码（因为它是开源的），然后我查看了一下。我建议使用这样的包：https://github.com/ethanselzer/react-hover-observer 甚至像这样引导经典反应包： https://react-bootstrap.github.io/components/overlays/

然后您可以做的是更新应用程序的状态并以这种方式添加覆盖。希望对您的项目有所帮助并祝您好运

【讨论】：