Question

如何在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>

Answer 1

我不认为这与CSS有关，最好有一个链接到你的github，但我\我跟踪你的代码（因为它的开源），我看了。我建议使用像这样的包：https://github.com/ethanselzer/react-hover-observer 甚至像这一样引导经典反应包： https://react-bootstrap.github.io/components/overlays/

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

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

1 个答案: