как преобразовать hover jquery в js pure?

Question

у меня есть этот код на js:

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

, но я не нашел ничего, чтобы преобразовать функцию зависания в javascript

у меня есть это:

const firstOption = document.querySelector(".custom-option:first-of-type");
const customSelectTrigger = document.querySelector(".custom-select-trigger");
const customOption = document.querySelector(".custom-option")

customOption.addEventListener("click", function (e) {
  manageOptions(e);
});
customSelectTrigger.addEventListener("click", function (e) {
  showOptions(e);
});
function showOptions(e) {
  e.preventDefault();
  e.stopPropagation();
  selectWrap.classList.add("active");
}
function manageOptions(e){
  e.preventDefault();
  e.stopPropagation();
}

my html:

        <div class="custom-select-wrapper">
          <select
            name="sources"
            id="sources"
            class="custom-select sources"
            placeholder="Source Type"
          >
            <option value="profile">Profile</option>
            <option value="word">Word</option>
            <option value="hashtag">Hashtag</option>
          </select>
          <div class="custom-select sources">
            <span class="custom-select-trigger">
              Source Type
            </span>
            <div class="custom-options">
              <span class="custom-option undefined">
                profile
              </span>
              <span class="custom-option undefined">
                word
              </span>
            </div>
          </div>
        </div>

Мне нужно добавить класс, когда происходит событие зависания, но я хотел сделать это для чистого js

Answer 1

Из документов hover() метод в основном является сокращением для:

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Итак, зная, что вам просто нужно создать прослушиватели событий для событий mouseenter и mouseleave

Вы можете сделать:

['mouseenter','mouseleave'].forEach(eName => {
    firstOption.addEventListener(eName, e => customOption.classList.toggle('option-hover') );
})

Answer 2

Вы можете использовать mouseenter и mouseleave и использовать classList для добавления классов к элементу:

firstOption.addEventListener('mouseenter', e => {
    customOption.classList.add('option-hover');
});
firstOption.addEventListener('mouseleave', e => {
    customOption.classList.remove('option-hover');
});