CODEWITHSUNDEEP
htmlcss
Luiscri
Luiscri

Reputation: 1037

Prevent hover property to apply when a fixed element is above

I have the following piece of code:

<div class="image-container">
    <div
        id="main-article-image"
        class="h-100 w-100 img-blur"
        style$="background-image: url('{{getArticleImage(article)}}');"
    >
    </div>
    <div class="overlay">Ariticle description...</div>   
</div>

<div id="article-container">...</div>

Here you are the CSS properties of those elementes:

.image-container {
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    bottom: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    color: white;
    font-family: Raleway-Light;
    font-size: 15px;
    padding: 15px;
    text-align: center;
    z-index: 3;
}

.overlay:hover {
    text-decoration: underline;
}

.image-container:hover .overlay {
    opacity: 1;
}

#article-container {
    position: fixed;
    top: 0;
    right: var(--my-elem-right);
    transition: right 0.3s linear;
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow: auto;
}

I have my #article-container element set as position: fixed and when an element is clicked, it will be displayed above the .image-container element. The problem is that when the fixed element is displayed and I place the mouse hover where the .overlay element is placed (behind the fixed one) the .overlay text still displays and can be seen absolutely positioned on the page.

Here you can see the usual behaviour of the element and here the undesired one. The red mark shows where the mouse was placed in order to the .overlay element to be showed.

Any idea how to fix this?

Upvotes: 0

Views: 1300

Answers (1)

Web Tailor
Web Tailor

Reputation: 391

It is because you have defined a Z-index on the .overlay element and not on the other elements. You could fix it by having the following z-index hierarchy. Keep in mind that you always need a position value other than static for z-index to work.

.image-container {
    position: relative;
    z-index: 1;
}
.overlay {
    position: absolute;
    z-index: 2;
}
#article-container {
    position: fixed;
    z-index: 3;
}

Upvotes: 1

Related Questions