Написал кастомный select, но он работает по клику. Как можно сделать выпадающее меню по наведению?
let lang = () => {
let langCurrent = document.querySelectorAll('.lang__header'),
langtItem = document.querySelectorAll('.lang__item'),
langCurrentText = document.querySelectorAll('.lang__current');
langCurrentText.forEach(el => {
let text = el.innerHTML;
if (el.innerHTML.length > 3) {
text = text.substr(0, 3);
el.innerHTML = text;
}
});
langCurrent.forEach((item) => {
item.addEventListener('click', (e) => {
e.currentTarget.parentElement.classList.toggle('lang--opened');
})
});
langtItem.forEach((item) => {
item.addEventListener('click', (e) => {
e.currentTarget.closest('.lang').querySelector('.lang__current').innerHTML = e.currentTarget.innerHTML.slice(0, 3);
e.currentTarget.closest('.lang').classList.remove('lang--opened');
})
});
};
lang();
.lang {
position: relative;
}
.lang:hover .lang__current {
color: red;
}
.lang:hover .lang__arrow {
fill: red;
}
.lang--opened .lang__body {
display: block;
}
.lang__header {
display: -webkit-flex;
display: -ms-flex;
display: flex;
align-items: center;
cursor: pointer;
}
.lang__body {
display: none;
left: 0;
position: absolute;
top: 100%;
right: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
border-radius: 6px;
background-color: #fff;
color: #000;
min-width: 172px;
max-width: 300px;
padding: 8px 0;
}
.lang__item {
cursor: pointer;
padding: 10px 12px;
line-height: 1;
transition: 0.2s;
}
.lang__current {
font-family: "SourceSansPro-SemiBold", sans-serif;
display: block;
margin-right: 7px;
font-size: 14px;
transition: 0.2s;
}
<div class="lang">
<div class="lang__header"><span class="lang__current">Українська мова</span></div>
<div class="lang__body">
<div class="lang__item">Українська мова</div>
<div class="lang__item">Русский язык</div>
</div>
</div>