How to make a block appear on hover?

Question

css

You need to do it in JQ so that when hovering a block appears, but when you remove the mouse, it also disappears ..

Answer 1

On pure JS:
Same thing but with jQuery:
And just in CSS:

Answer 2

Required for JQ? Can be done with simple CSS.

.block {
 width: 100px;
 height: 100px;
 background: red;
 opacity: 0;
}

.block:hover {
 opacity: 1;
}

Or

.block {
 width: 100px;
 height: 100px;
 background: red;
 display: none;
}

.block:hover {
 display: block;
}

You can also add a fade in.

.block {
 width: 100px;
 height: 100px;
 background: red;
 opacity: 0;
}

.block:hover {
 opacity: 1;
 transition: .3s;
}

Answer 3

https://jsfiddle.net/502ek6ta/

Answer 4

It is possible without js.
If you need to show the inner block:

.block .block-child {
 opacity: 0;
}

.block:hover .block-child  {
 opacity: 1;
 transition:  opacity .3s;
}

If you need to show the adjacent block:

.block+.block-child {
 opacity: 0;
}

.block:hover+.block-child  {
 opacity: 1;
 transition:  opacity .3s;
}