时间戳

首页 > 解决方案 > 悬停影响不显示正确元素的不同元素

html - 悬停影响不显示正确元素的不同元素

问题描述

我创建了一个使用 flex 在容器内显示 5 个图标的 div。这些容器中的每一个都有一个 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 容器上，它会显示相应的文本。但是，如果您尝试将鼠标移动到其中一个文本容器中，它会删除相应的容器并将最后一个容器放在那里。

标签： htmlcss

解决方案

设置您的：

.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在你的 HTML 标记中是最后一个。

推荐阅读