我创建了一个div，它使用flex在容器中显示5个图标。 每个容器都有一个div，里面有一个文本元素。 默认情况下，文本div的不透明度为0，当其父级处于悬停状态时，将更改为1。

当您将鼠标移到文本div中时，问题就会发生。 由于某种原因，它默认显示最后一个父元素的文本div。 我在这里重新创建了这个问题:JSFiddle

下面是HTML的基本结构。 为了可读性，我删除了最后3个内容div。

<div class="container-fluid icon-repeater-fluid-container pt-5 pb-5">
    <div class="container icon-repeater-container pb-lg-5">
        <div class="text-center d-flex flex-column flex-lg-row justify-content-center justify-content-lg-around">
            <div class="p-3 learn-more-main">
                <i class="far fa-address-card learn-more-icon"></i>
                <p class="learn-more-labels">Learn More</p>
                <div class="learn-more-content-container">
                    <div class="learn-more-content h-100 w-100 d-flex justify-content-center align-items-center p-3">
                        <i class="fas fa-caret-up learn-more-caret caret-1"></i>
                        <p class="mb-0 text-center">
                            I am a sentence that belongs under the Learn More container. I should really only be a few sentences.
                        </p>
                    </div>
                </div>
            </div>
            <div class="p-3 learn-more-main">
                <i class="fab fa-angular learn-more-icon"></i>
                <p class="learn-more-labels">Angular Skills</p>
                <div class="learn-more-content-container">
                    <div class="learn-more-content h-100 w-100 d-flex justify-content-center align-items-center p-3">
                        <i class="fas fa-caret-up learn-more-caret caret-2"></i>
                        <p class="mb-0 text-center">
                            I am a sentence that belongs under the Angular Skills. I should really only be a few sentences.
                        </p>
                    </div>
                </div>
            </div>
            ...
        </div>
    </div>
</div>

下面是我用来显示相应div的css行

.learn-more-main:hover .learn-more-content-container{
    opacity:1;
}

如果将鼠标悬停在任何。learn-more-main容器上，它将显示相应的文本。 但是，如果您试图将鼠标移到这些文本容器中的一个，它会移除相应的容器，而将最后一个容器放在那里。