时间戳

首页 > 解决方案 > 将鼠标悬停在 React 中的图像上时如何将基本过渡应用于文本

javascript - 将鼠标悬停在 React 中的图像上时如何将基本过渡应用于文本

问题描述

我有一个容器<div>，里面有 3 个图像 之前：悬停

我<div>在它们下面有 3 ，其中包含一些文本，当相应的图像像这样悬停在上面时会显示这些文本：

在此处输入图像描述

这是我的代码，我正在使用 React：

        <div className = "Page">
        <div className = "About">
            <h1 className = "Headerr-1">We at flower shop</h1>
            <h1 className = "Headerr-2">dedicate ourselves to providing you the best flowers for all occations</h1>

            <p className = "paragraph-1"> we use some of the best tools to fertilize our flowers so it can meet your every need</p>
            <p className = "paragraph-2" >here is some testimoney from our clients</p>


            <div className = " testimony-container">

                <img src = {Man} width = "400" height = "400" className = "man-img" />
                <img src = {Woman} width = "400" height = "400" className = "woman-img" />
                <img src = {Miles} width = "400" height = "400" className = "miles-img" />

                <div className = "man-text-container">
                    <p className = "man-p"> ''I was in dire need of a quick way to get my flowers
                        on time for my wedding day, I would like to thank Flower
                        Shop for their efforts on showing up in time.''</p>
                    <p className = "man-title">
                        -Melvin Jones
                    </p>
                </div>
                <div className = "woman-text-container">
                    <p className = "woman-p"> ''I needed some fresh picked flowers as a gift for my
                    grandmother's birthday, and a friend referenced flowershop to me. Suffice to say
                        I don't have any regrets!''
                    </p>
                    <p className = "woman-title">
                    -Vanessa Richardson 
                    </p>
                </div>
                <div className = "miles-text-container">
                    <p className = "miles-p"> ''An old friend of mine was sick and I was looking to
                    purchase some flowers as a gift and send it to the hospital where he was resting.
                    I thank Flower Shop for their beautifully picked flowers.''
                    </p>
                    <p className = "miles-title">
                    -Miles Edgeworth
                    </p>
                </div>
            </div>
        </div>
    </div>

我想做的是添加一个基本的过渡，以缓慢的方式显示文本。我尝试使用opacity，但是当我希望文本在悬停动作中淡入淡出时，文本刚刚开始以一种奇怪的方式跑向屏幕。

最好的方法是什么？

标签： javascripthtmlcssreactjs

解决方案

使用不透明度对我来说效果很好：

.man-text-container, 
.miles-text-container, 
.woman-text-container {
    opacity:0;
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;  
    -moz-transition: opacity 300ms ease-in-out;
}

.man-img:hover~.man-text-container, 
.woman-img:hover~.woman-text-container, 
.miles-img:hover~.miles-text-container {
    opacity: 1;
}

你的 CSS 是什么样的？

推荐阅读