Javascript 当鼠标悬停在React中的图像上时，如何将基本转换应用于文本

我有一个容器

，里面有3个图像

我在它们下面有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>

我们在花店购物
竭诚为您提供各种场合最好的鲜花
我们使用一些最好的工具为我们的花朵施肥，以满足您的各种需求
这是我们客户给我们的一些钱
''我急需一种快速的方法来取我的花
在我结婚的那天，我要感谢花
购买他们为及时出现所做的努力。”

-梅尔文·琼斯

''我需要一些新鲜采摘的花作为我生日的礼物
奶奶的生日，还有一个朋友向我推荐花店。可以说
“我没有任何遗憾！”


-瓦妮莎·理查森

''我的一位老朋友病了，我正在看医生
买些花作为礼物，送到他休息的医院。
我感谢花店为他们精心挑选的花


-迈尔斯·埃奇沃思

我想做的是添加一个基本的过渡，以缓慢的方式显示文本。我尝试使用

不透明度

，但当我希望文本在悬停动作中淡入淡出时，文本开始以一种奇怪的方式向屏幕移动

---

实现这一点的最佳方法是什么？

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

.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看起来像什么？

由于某种原因，我无法直接复制粘贴代码，所以我将其保存在codepen上。我在这里做错了什么？问题是您正在设置

font-size:2.2rem和
文本对齐：居中在：悬停选择器中，而不是首先将其应用于普通选择器。这就是为什么当您将鼠标悬停在图像上时，文本会四处移动，因为它会调整大小并移动文本，同时使其可见。您可以从
.man img:hover~.man文本容器
选择器中取出所有内容，但要更改的内容除外，即“不透明度：1；”。将所有其他物品移到容器中。