how to make a class keep in that ul li tag after mouseover listener out from that div?

Question

i am trying to make option select which use DOM to choose the option in div here is my dropdown html: so I make this div scrollable and have event listener up and down

then up and down on focus, I will add class hover which gonna have background-color also when mouse over to that LI tag, gonna add that class as well

but after mouse out from the box it keep deleted the class on muy function

how to make that class steady/keep in that li tag after i am out from the box?

 var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li"); document.addEventListener("keydown",handler); document.addEventListener("mouseover",handler); function handler(e){ active.classList.remove("hover"); if (e.which == 40){ active = active.nextElementSibling || active; }else if (e.which == 38){ active = active.previousElementSibling || active; }else{ active = e.target; } active.classList.add("hover"); }

 ul.dropdownItemContainer li.hover { background-color: #8284e6; }.dropdown-test { height: 90px; }

 <div class="dropdown-test"> <ul class="dropdownItemContainer"> <li class="hover">Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 5</li> <li>Item 6</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 5</li> <li>Item 6</li> </ul> </div>

can anyone help to explain also and using javascript only? please

Answer 1

The "problem" is the script will delete hover class when you hover another element, you need to check if this element is into this for example (you can use your method instead) i add data-attribute and check if have this data-checker into script, if not don't do nothing.

 var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li"); document.addEventListener("keydown", handler); document.addEventListener("mouseover", handler); function handler(e) { if (e.target.hasAttribute("data-checker")) { active.classList.remove("hover"); if (e.which == 40) { active = active.nextElementSibling || active; } else if (e.which == 38) { active = active.previousElementSibling || active; } else { active = e.target; } active.classList.add("hover"); } }

 ul.dropdownItemContainer li.hover { background-color: #8284e6; }.dropdown-test { height: 90px; }

 <div class="dropdown-test"> <ul class="dropdownItemContainer"> <li class="hover" data-checker>Item 1</li> <li data-checker>Item 2</li> <li data-checker>Item 3</li> <li data-checker>Item 4</li> <li data-checker>Item 5</li> <li data-checker>Item 6</li> <li data-checker>Item 5</li> <li data-checker>Item 6</li> <li data-checker>Item 2</li> <li data-checker>Item 3</li> <li data-checker>Item 4</li> <li data-checker>Item 5</li> <li data-checker>Item 6</li> <li data-checker>Item 5</li> <li data-checker>Item 6</li> </ul> </div>

---

If you want use data-attribute only into <ul> use this code:

 var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li"); document.addEventListener("keydown", handler); document.addEventListener("mouseover", handler); function handler(e) { e.preventDefault(); let element = null; if (e.which === 40) { element = active.nextElementSibling; } if (e.which === 38) { element = active.previousElementSibling; } if ((e.target.parentElement && e.target.parentElement.hasAttribute("data-checker")) || (element && element.parentElement.hasAttribute("data-checker"))) { active.classList.remove("hover"); if (e.which == 40) { active = active.nextElementSibling || active; } else if (e.which == 38) { active = active.previousElementSibling || active; } else { active = e.target; } active.classList.add("hover"); } }

 ul.dropdownItemContainer li.hover { background-color: #8284e6; }.dropdown-test { height: 90px; }

 <div class="dropdown-test"> <ul class="dropdownItemContainer" data-checker> <li class="hover">Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 5</li> <li>Item 6</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 5</li> <li>Item 6</li> </ul> </div>