So I'm trying to make a header that when hovering over it, it will show a button. And if not, the button will disappear while still taking up space in the layout. I've tried,
.button {
visibility: hidden;
}
.heading:hover + .button {
visibility: visible
}
But the visibility attribute won't change when hovering over it.
I tried using
.button {
visibility: hidden;
}
.heading:hover + .button {
visibility: visible
}
But it didn't work. I expected the visibility attribute to change when hovering over an element with the class “heading”, but it didn't. I am sure that it has detected that I am hovering over it because in a past attempt I used the display attribute, and it worked, just that when I'm not hovering over the heading the button will not take up any space, mildly changing the layout of the page. Old code:
button {
display: none;
}
.heading:hover + .button {
display: block;
}
Also, in case you're confused, the “heading” class is applied in the heading element while the “button” class is applied for the button. I was thinking it might need to use JavaScript to make it work, so I added the JavaScript tag. jQuery could also work, but I think it uses the display attribute, which makes the element not take up space when hidden.
Without see the DOM structure I will suggest you the following css code.
.button {
opacity: 0;
pointer-events: none;
transition: opacity .3s;
}
.heading:hover .button {
opacity: 1;
pointer-events: visible;
}
Assuming that your HTML code is something like this:
<div class="heading">
<a href="#" class="button">YOUR BUTTON</a>
</div>
If you add a + to your CSS selector, you are selecting the next element in the same hierarchy level. To select a child element, as i supose the button is, you have to let a blank space between .parent-element and .child-element as in the example above.