Home/ Questions/Q 9323899
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T04:27:35+00:00

I’ve come across a bit of a problem with hovering over items when opacity:

  • 0

I’ve come across a bit of a problem with hovering over items when opacity: 0;, but because they still exist in the space (just not visible), unlike display: none;, any hover events attached to that object still happens.

Can’t really post the code I’m using, but I’ve set up a fiddle with a little more explanation to simulate it. Just as a note, I’d much rather not use any Javascript to solve it, try and keep it pure HTML/CSS. I’ve also posted the HTML and CSS from the fiddle below:

HTML:

<div class="container">
    <div class="secondary-container">
        .opacity-0 fills this box.
        <div class="opacity-0"></div>
        <div class="on-hover">Hello, world!</div>
    </div>
</div>

CSS:

body {
    font-family: sans-serif;
}

.container {
    width: 200px;
    height: 200px;
    background-color: blue;
}

.container .secondary-container {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: white;
    padding: 5px;
    box-sizing: border-box;
}

.container .secondary-container .opacity-0 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: -41px;
    margin-left: -5px;
    opacity: 0;
}

.on-hover {
    display: none;
    color: white;
}

.container .secondary-container .opacity-0:hover ~ .on-hover {
    display: block;
}

And the explanation:

Hover on the white square, and the text “Hello, world!” should display (from the div.on- hover). However, you are actually hovering over .opacity-0, as explicitly stated in the CSS.

I need to be able to hover over .opacity-0, and when the opacity is at 0 (i.e object is not visible, but still exists in the space), the hover event does not fire. When the opacity is at 1, and you hover over .opacity-0, the hover event carries on like normal. Preferably no Javascript should be used.

Hope that all makes sense, happy to answer any questions about it as I realise I may not have explained this amazingly well.

Thank you for any help 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve solved it 🙂 First, I need to say that I forgot to mention in the OP that I need the box to fade in with CSS3 transitions – sorry.

    Using just visibility:hidden; did some weird stuff with the transition, so what I’ve done is use both visibility and opacity. This then transitions both but the visibility transition problems don’t happen any more due to opacity apparently taking more preference. Thanks for the help!

    • 0