hover эффект на javascript

Frontend developer JavaScript
1

Только изучаю javascript, стало интересно как реализовать что то на подобии hover помощью js, к сожалению не получается, думал это будет попроще, подкиньте примерчик пожалуйста) дальше я бы уже отталкиваясь от него освоился бы, заранее благодарю)

2

Вот как по мне очень простой и логичный пример:

<div class="icon">Наведи на меня курсор мышки

<div class="block">

Два простых блока, первый будет видимым второй будет показываться при наведении на первый.

.icon{

    width: 100px;

    height: 100px;

    background: green;

}



.block{

    visibility: hidden;

    width: 250px;

    height: 250px;

    background: blue;

}

Задали оформление блокам и спрятали второй блок.

let icon = document.querySelector('.icon');

let block = document.querySelector('.block');



icon.addEventListener('mouseover', foo);

icon.addEventListener('mouseout', foo);



function foo(event){

    if(event.type === 'mouseover'){

        block.style.visibility = 'visible';

    } else block.style.visibility = '';

}

Тут уже в зависимости от события мы вызываем метод foo, в случае если мышка наведена то мы дописываем к классу блок свойству visibility visible; в другом случае ничего, всё просто)