悬停以影响不显示正确图元的不同图元

Question

我已经创建了一个div，它使用flex在容器中显示5个图标。每个容器都有一个包含文本元素的div。默认情况下，该文本div的不透明度为0，当它的父级悬停时，该文本div的不透明度会更改为1。

当您将鼠标移到text 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容器上，它会显示相应的文本。但是，如果您尝试将鼠标移动到其中一个文本容器中，它会移除适当的容器，并将最后一个容器放在那里。

Answer 1

设置您的：

.learn-more-content-container{
        position: absolute;
        bottom:0;
        left:0;
        right:0;
        opacity:0;
        transition: opacity .25s;
       pointer-events: none;  

在你的背上悬停在pointer-events: auto;上：

.flex-column .learn-more-main:hover > .learn-more-content-container{
        opacity:1;
        pointer-events: auto;
    }

你的问题是不透明，元素仍然在那里，移动鼠标它失去了选择，如果你想从底部向上移动鼠标，它总是显示最后一个，因为它是你的超文本标记语言标记中的最后一个learn-more-main。