Propozycja. (html i css tylko dla celów pokazowych)
<button>show vidmo</button>
<div id="div-vidmo" class="hide"></div>
* {
box-sizing: border-box;
}
button {
background-color: rgba(230,230,230,0.8);
border: 0;
font: 2em/2.1em monospace;
width: 40vw;
text-align: center;
}
div#div-vidmo {
margin-top: 1em;
width: 40vw;
height: 200px;
background-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
}
.hide {
display: none;
}
const button = document.querySelector('button');
const div_vidmo = document.querySelector('#div-vidmo');
['mouseover', 'mouseout'].forEach(event => {
button.addEventListener(event, () => {
div_vidmo.classList.toggle('hide');
})
});