Блог

моя проблема может быть простой, но я не уверен, как ее исправить. У меня есть скрипт, который изменяет классы элемента svg при возникновении события наведения курсора мыши.

 const navbarExpand = document.getElementById('navbarExpand');
navbarExpand.addEventListener('mouseover', function () {
    document.getElementById('navbarIcon').className = "nav__dropdown-icon nav__dropdown-icon--hovered";
});  

 <li class="nav__dropdown-item nav__dropdown-item--expand">
  <a href="#" class="nav__link nav__link--dropdown">
      <svg class="nav__dropdown-icon" id="navbarIcon">
          <use xlink:href="assets/icons/sprite.svg#double-right-arrow"></use>
      </svg>
      Aktualności
  </a>
  <ul class="nav__dropdown--expand" id="navbarExpand">
    <li class="nav__dropdown-item"><a href="#" class="nav__link nav__link--dropdown">Placeholder</a></li>
    <li class="nav__dropdown-item"><a href="#" class="nav__link nav__link--dropdown">Placeholder</a></li>
    <li class="nav__dropdown-item"><a href="#" class="nav__link nav__link--dropdown">Placeholder</a></li>
  </ul>
</li>  

Консоль ничего не говорит. Я хочу сделать это в ванильном js, а не в jQuery.

Не className (аналогично в react), а classList Список классов MDN

И не наведение курсора мыши, потому что это событие вызывается больше времени, чем вам нужно, оно даже может вызвать мигание (TLTW), но в целом проверьте это: MousEnter vs mouseOver MDM

 <script>
const navbarExpand = document.getElementById('navbarExpand');

navbarExpand.addEventListener('mouseenter', () => {
  document.getElementById('navbarIcon').classList.add("nav__dropdown-icon--hovered");
});
navbarExpand.addEventListener('mouseleave', () => {
  document.getElementById('navbarIcon').classList.remove("nav__dropdown-icon--hovered");
});
</script>
  

Свойство className элемента SVG имеет определение, отличное от свойства className элемента HTML.

В HTML className является строкой. В SVG это объект SVGAnimatedString . Вот почему вы не можете просто сделать svgElement.className = "navIconclassname" .

Однако element.setAttribute() будет работать https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

  <li class="nav__dropdown-item nav__dropdown-item--expand">
                        <a href="#" class="nav__link nav__link--dropdown">
                            <svg class="nav__dropdown-icon" id="navbarIcon">
                                <use xlink:href="assets/icons/sprite.svg#double-right-arrow"></use>
                            </svg>
                            Aktualności
                        </a>
    
                        <ul class="nav__dropdown--expand" id="navbarExpand">
                            <li class="nav__dropdown-item"><a href="#" class="nav__link nav__link--dropdown">Placeholder</a></li>
                            <li class="nav__dropdown-item"><a href="#" class="nav__link nav__link--dropdown">Placeholder</a></li>
                            <li class="nav__dropdown-item"><a href="#" class="nav__link nav__link--dropdown">Placeholder</a></li>
                        </ul>
    
                        <script>
                         
       const navbarExpand = document.getElementById('navbarExpand');
                            navbarExpand.addEventListener('mouseover', function () {
       var navBarIcon = document.getElementById('navbarIcon'); navBarIcon.setAttribute("class"," nav__dropdown-icon  nav__dropdown-icon--hovered");
                            });
    
                        </script>
    
    </li>
  

Вместо использования className для обновления класса svg. Возможно, попробуйте использовать setAttribute или classList.add

 const navbarIcon = document.getElementById('navbarIcon');
navbarIcon.setAttribute('class', 'nav__dropdown-icon nav__dropdown-icon--hovered');
// or
navbarIcon.classList.add('nav__dropdown-icon--hovered');
  

Я думаю, вам следует попробовать использовать toggle в своем классе вот так document.getElementById('navbarIcon').className.toggle("nav__dropdown-icon--hovered");

Надеюсь, это поможет <3