[英]How can I use the onmouseover event on a nav using its class?
I am new to javascript and am trying to get a mouseover on a nav to make it change color of the nav bar to green.我是 javascript 新手,正在尝试将鼠标悬停在导航上,以使其将导航栏的颜色更改为绿色。 I coded what I thought would work but nothing is happening.我编写了我认为可行的代码,但什么也没发生。 The total length of the entire html page is huge, so I am just adding the code I believe affects the nav mouseover.整个html页面的总长度很大,所以我只是添加了我认为会影响导航鼠标悬停的代码。 I'm also using getelementsbyclass[2] because it's the 3rd element with the class.我也在使用 getelementsbyclass[2] 因为它是该类的第三个元素。
<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";
}
First of all the Javascript syntax will be首先,Javascript 语法将是
document.getElementsByClassName("group")[0].style.backgroundColor = "green"
And with the code you provided, I just changed ("group")[3] to ("group")[0] and it just works.使用您提供的代码,我只是将("group")[3]更改为("group")[0]并且它可以正常工作。
In your code, there are many mistakes.在您的代码中,有很多错误。 The first mistake is in this line of myscript.js
:第一个错误是在myscript.js
这一行:
document.getElementsByClassName("group")[2].style.background-color = "green";
There is no background-color
property in JavaScript DOM. JavaScript DOM 中没有background-color
属性。 Instead, this is how it will look: backgroundColor
.相反,它的外观是这样的: backgroundColor
。 So, now myscript.js
should look like this:所以,现在myscript.js
应该是这样的:
function func1() {
document.getElementsByClassName("group")[2].style.backgroundColor = "green";
}
The second issue is in the same line, document.getElementsByClassName("group")[2].style.backgroundColor = "green";
第二个问题在同一行, document.getElementsByClassName("group")[2].style.backgroundColor = "green";
. . document.getElementsByClassName("group")
will return an array containing all the elements that have the class of group
. document.getElementsByClassName("group")
将返回一个包含所有具有group
类的元素的数组。 In your HTML code, only one element, the <nav>
tag has this class.在您的 HTML 代码中,只有一个元素<nav>
标签具有此类。 Since array indexing begins with 0, there is no document.getElementsByClassName("group")[2]
element.由于数组索引从 0 开始,因此没有document.getElementsByClassName("group")[2]
元素。 Only the firs t element with the index of 0
exists in this array.此数组中仅存在索引为0
第一个 t 元素。 So change that index.所以改变那个索引。 Now, your JavaScript code should look like this:现在,您的 JavaScript 代码应如下所示:
function func1() {
document.getElementsByClassName("group")[0].style.backgroundColor = "green";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.