Question

我的问题可能很简单，但是我不确定如何解决。我有一个脚本，可以在发生mouseover事件时更改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）来实现。

Answer 1

不是className（发生反应），而是classList class List 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>

Answer 2

SVG元素上的className属性与HTML元素的className属性具有不同的定义。

在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>

Answer 3

代替使用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');

Answer 4

我认为您应该尝试在toggle这样的类中使用document.getElementById('navbarIcon').className.toggle("nav__dropdown-icon--hovered");

希望这对<3

有帮助

鼠标悬停事件未触发

4 个答案: