Home

Mouse events version 2

Section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aliquid architecto commodi consequatur debitis eaque eos est, hic labore laboriosam laborum nulla officia omnis perspiciatis quaerat quidem sapiente similique.

Section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aliquid architecto commodi consequatur debitis eaque eos est, hic labore laboriosam laborum nulla officia omnis perspiciatis quaerat quidem sapiente similique.

const btnHide = document.getElementById('hide');
const btnShow = document.getElementById('show');
const btnToggle = document.getElementById('toggle');

const section1 = document.getElementById('section1');
const section2 = document.getElementById('section2');

btnHide.addEventListener('click', function (e) {
    section1.classList.add('hide');
});

btnShow.addEventListener('click', function (e) {
    section1.classList.remove('hide');
});

btnToggle.addEventListener('dblclick', function (e) {
    section1.classList.toggle('hide');
});

section2.addEventListener('mouseenter', function (e) {
    section1.classList.add('flip');
});

section2.addEventListener('mouseleave', function (e) {
    section1.classList.remove('flip');
});