You’re probably already familiar with the visibility
CSS property. We use it to hide or show something on the page by toggling its value between visible
and hidden
. But there’s a third value you might not have noticed yet.
Its value, collapse
, used specifically in html table
, hides rows and columns in a way similar to how details
collapses its content. If used on anything else and in browser not supporting this value yet, it behaves like visible:hidden
.
.ans { | |
visibility: collapse; | |
} | |
.que:hover + .ans { | |
visibility: visible; | |
} |
.que
and .ans
are two tr
elements, for a question and answer, respectively. See the codepen.