如何使用 class 在导航上使用 onmouseover 事件？

Question

我是 javascript 的新手，我正在尝试将鼠标悬停在导航栏上以使其将导航栏的颜色更改为绿色。我编写了我认为可行的代码，但没有任何反应。整个 html 页面的总长度很大，所以我只是添加我认为会影响导航鼠标悬停的代码。我也在使用 getelementsbyclass[2] 因为它是带有 class.

的第三个元素

    <nav class="group" onmouseover="func1()">
       <ol>
          <li><a href="index.html">home</a></li>
          <li><a href="artists.html">artists</a></li>
          <li><a href="schedule.html">schedule</a></li>
          <li><a href="venuetravel.html">venue/travel</a></li>
          <li><a href="register.html">register</a></li>
       </ol>
    </nav>

    <script src="_/js/myscript.js"></script>

    <!--myscript.js-->

    function func1() {
       document.getElementsByClassName("group")[2].style.background-color = "green";
    }

Answer 1

首先 Javascript 语法将是

document.getElementsByClassName("group")[0].style.backgroundColor = "green"

根据您提供的代码，我刚刚将 ("group")[3] 更改为 ("group")[0] 并且很管用。

Answer 2

在你的代码中，有很多错误。第一个错误是在 myscript.js:

这一行

document.getElementsByClassName("group")[2].style.background-color = "green";

JavaScriptDOM中没有background-color属性。相反，它将是这样的：backgroundColor。所以，现在 myscript.js 应该是这样的：

    function func1() {
       document.getElementsByClassName("group")[2].style.backgroundColor = "green";
    }

第二期在同一行，document.getElementsByClassName("group")[2].style.backgroundColor = "green";。 document.getElementsByClassName("group") 将 return 包含具有 group 的 class 的所有元素的数组。在你的 HTML 代码中，只有一个元素，<nav> 标签有这个 class。由于数组索引从 0 开始，因此没有 document.getElementsByClassName("group")[2] 元素。此数组中仅存在索引为 0 的第一个元素。所以改变那个索引。现在，您的 JavaScript 代码应如下所示：

    function func1() {
       document.getElementsByClassName("group")[0].style.backgroundColor = "green";
    }

如何使用 class 在导航上使用 onmouseover 事件？

How can I use the onmouseover event on a nav using its class?

html

javascript

css

dom

onmouseover