CODEWITHSUNDEEP
htmlcss
onTheInternet
onTheInternet

Reputation: 7253

Hover to affect different element not showing correct element

I've created a div that uses flex to display 5 icons inside of a container. Each of these containers has a div with a text element inside. This text div has an opacity of 0 by default and is changed to 1 when it's parent is hovered.

The problem happens when you move your mouse into the text div. For some reason, it defaults to showing the text div of the very last parent element. I've recreated the issue here: JSFiddle

Here is the basic structure of the HTML. I've removed the last 3 content divs for readability.

<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>

and here's the line of css that I'm using to show the appropriate div

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

If you hover over any of the .learn-more-main containers, it shows the appropriate text. But if you try to move your mouse into one of these text containers, it removes the appropriate container and puts the very last container there instead.

Upvotes: 0

Views: 57

Answers (1)

ikiK
ikiK

Reputation: 6532

Set your:

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

And on hover your back to pointer-events: auto; :

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

Your problem was the opacity, elements are still there and moving mouse it was losing selection, if you would go with mouse up from bottom it always shows last one because it was last learn-more-main in your HTML markup.

Upvotes: 1

Related Questions