Question

我是编码的新手，我在onmouseover和onmouseout事件上遇到了麻烦。我试图让它成为当我的鼠标滚过导航栏中的元素时它会变成粉红色。问题是我发现的所有东西都使用Jquery而不是Javascript。根据调试器，navBarTextReaction没有定义但是我该如何定义呢？我必须设置与功能相同的东西吗？我很困惑。请帮忙！出于某种原因，它在这里工作，当我在浏览器中加载它时仍然无法正常工作。

＆＃13;

navBarVar = document.getElementById("navBar").classList;
function navBarTextReaction() {
    if(navBarVar.contains("makeWhite")) {
        navBarVar.remove("makeWhite");
    }
    else {
        navBarVar.add("makeWhite");
    }
    if(navBarVar.contains("makePink")){
        navBarVar.remove("makePink");
    }
    else {
        navBarVar.add("makePink");
    }
}

＆＃13;

.background {
    background: #4F4F52; 
}
.navbar1 {
    background: #282727;
    shadow: 1em 1em #87B4CB;
    font-family: Patrick Hand SC;
    text-shadow: .01em .01em #171717; 
    font-size: 1.5em;
    text-align: center;
}
.makeWhite {
    color: #FFFFFF;
    font-weight: bold;
}
.makePink {
    color: #FBEBEB;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link href="https://fonts.googleapis.com/css?family=Cardo|Great+Vibes|Patrick+Hand+SC|Quattrocento" rel="stylesheet">
        <script src="script.js"></script>
  </head>
<body> 
    <div class = "background">
    <div class = "container-fluid">
        <div class = "row">
            <div onmouseover = "navBarTextReaction()" onmouseout = "navBarTextReaction()" id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Home Page </div>
            <div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Chord Leading Chart </div> 
            <div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Note Game </div> 
            <div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Circle of Fifths </div> 
        </div> 
    </div>
    </div> 
</body> 
</html>

＆＃13;

Answer 1

丢失所有重复的id属性，只使用CSS类和:hover pseudo-class

.navbar1 {
  color: #fff;
  font-weight: bold;
}

.navbar1:hover {
  color: #FBEBEB;
  font-weight: normal;
}

<div class="navbar1 col-sm-3">Home Page</div>
<div class="navbar1 col-sm-3">Chord Leading Chart</div> 
<div class="navbar1 col-sm-3">Note Game</div> 
<div class="navbar1 col-sm-3">Circle of Fifths</div>

Answer 2

<div onmouseover = "navBarTextReaction()" onmouseout = "navBarTextReaction()" id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Home Page </div>

在HTML中的函数名后面添加（），我还更正了代码以使用正确的函数名。

Answer 3

navBarVar = document.getElementById("navBar").classList;
function navBarTextReaction() {
    if(navBarVar.contains("makeWhite")) {
        navBarVar.remove("makeWhite");
    }
    else {
        navBarVar.add("makeWhite");
    }
    if(navBarVar.contains("makePink")){
        navBarVar.remove("makePink");
    }
    else {
        navBarVar.add("makePink");
    }
}

.background {
    background: #4F4F52; 
}
.navbar1 {
    background: #282727;
    shadow: 1em 1em #87B4CB;
    font-family: Patrick Hand SC;
    text-shadow: .01em .01em #171717; 
    font-size: 1.5em;
    text-align: center;
}
.makeWhite {
    color: #FFFFFF;
    font-weight: bold;
}
.makePink {
    color: #FBEBEB;
}

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <link href="https://fonts.googleapis.com/css?family=Cardo|Great+Vibes|Patrick+Hand+SC|Quattrocento" rel="stylesheet">
        <script src="script.js"></script>
  </head>
<body> 
    <div class = "background">
    <div class = "container-fluid">
        <div class = "row">
            <div onmouseover = "navBarTextReaction()" onmouseout = "navBarTextReaction()" id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Home Page </div>
            <div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Chord Leading Chart </div> 
            <div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Note Game </div> 
            <div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Circle of Fifths </div> 
        </div> 
    </div>
    </div> 
</body> 
</html>

navBarTextReation =＆gt; navBarTextReaction()

OnMouseEvents问题

3 个答案: