悬停影响不显示正确元素的不同元素答案

【问题标题】：Hover to affect different element not showing correct element悬停影响不显示正确元素的不同元素
【发布时间】：2020-06-30 14:06:05
【问题描述】：

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

【问题讨论】：

无法弄清楚，但如果你把指针事件：无；在您的 .learn-more-content-container 从一开始（媒体查询之外），此行为将停止，但如果您将鼠标向下移动它就不会显示。
我赞成你的评论。这不是我想要的，但它是很好的信息，如果我无法弄清楚，我会使用它。

标签： html css

【解决方案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;
    }

你的问题是不透明度，元素仍然存在并且移动鼠标它失去了选择，如果你从底部向上移动鼠标，它总是显示最后一个，因为它在你的 HTML 标记中是最后一个learn-more-main。

【讨论】：