Can I make an overflowing text hide when the mouse is outside the parent div?

I don’t know how to formulate my question, thats why I included this gif.

Is it possible to some how make the text overflow only when the mouse is inside the white rectangles borders?
I think that when the text pops up, it has a rectangular box surrounding it and it blocks the element underneath it.
Is there a way around this?

Thats the CSS code that I am using.


.flex-container
{
    width: 1000px;
    height: 80px;
    margin:  100px auto;
    

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.item-1
{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 15px;
    height: 80px;
    background-color: white;
    transition: 1000ms;

    overflow: hidden;
}

#full
{
    background-color: darkred;
    transition: 1000ms;
}

#full:hover
{
    background-color: white;
    transition: 1000ms;
}

.item-1:hover
{
    position: relative;
    height: 45px;
    transition: 100ms;
    overflow: visible;
}

.item-1 p
{
    visibility: hidden;
    opacity: 0;
    font-size: 60px;
    font-family: 'Times New Roman', Times, serif;
    color: darkred;
}

.item-1:hover p
{
    visibility: visible;
    opacity: 1;
    transition: 300ms;
}

I think what you’re looking for (if you want to do this with pure CSS) is the mouse pointer-events property. Usually I recommend W3schools for CSS stuff, but MDN has a good demonstration, and CSS tricks covers it, too, as you can see by the top three results in the google search for “mouse pointer events css”

1 Like

Thanks! Adding just pointer-events:none; fixed solved my problem!

1 Like

You’re welcome. I had a similar problem with layered elements that made me hunt down the answer. Make sure to check the “Solved” thing next to my original reply so others with the same question know where the answer is.