javascript - 将CSS应用于Javascript代码

这个你能帮我吗。我正在尝试将CSS样式应用于我拥有的此Javascript代码。

我希望它包含悬停/或鼠标悬停在文本的颜色，例如白色，没有下划线或类似的东西。

有人可以给我举个例子吗？

我是一个初学者，不知道如何制作这样的东西

var links = [
  ['Home', '#1'],
  ['News', '#2'],
  ['Contact', '#3'],
  ['About', '#4']
];

function makeNav( links ) {
  var nav = document.getElementById('myTopnav');
  for ( var i = 0; i < links.length; i ++ ) {
    nav.innerHTML += '<a class="nav-link" href="' + links[i][1] + '">' + links[i][0] + '</a>' + ' ';
  }
  return nav;
}

makeNav( links );

body {
  background-image: url(backgroundimg.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#myTopnav {
  background: rgba(25, 25, 25, .2);
  height: 40px;
  top: 200px;
  position: absolute;
  width: 50%;
  z-index: 0;
  text-align: center;
  padding: 10px;
  word-spacing: 40px;
  font-size: 30px;
  color: white;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
    <div class="topnav" id="myTopnav"></div>
<script src="jquery-3.2.1.min"></script>
<script src="javascript.js"></script>
  </body>
</html>

最佳答案

在CSS中，对链接:hover使用.nav-link，如下所示：

var links = [
  ['Home', '#1'],
  ['News', '#2'],
  ['Contact', '#3'],
  ['About', '#4']
];

function makeNav( links ) {
  var nav = document.getElementById('myTopnav');
  for ( var i = 0; i < links.length; i ++ ) {
    nav.innerHTML += '<a class="nav-link" href="' + links[i][1] + '">' + links[i][0] + '</a>' + ' ';
  }
  return nav;
}

makeNav( links );

body {
  background-image: url(backgroundimg.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#myTopnav {
  background: rgba(25, 25, 25, .2);
  height: 40px;
  top: 200px;
  position: absolute;
  width: 50%;
  z-index: 0;
  text-align: center;
  padding: 10px;
  word-spacing: 40px;
  font-size: 30px;
  color: white;
}

.nav-link:hover {
  color: #FFF;
  text-decoration: none;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css.css">
    <title></title>
  </head>
  <body>
    <div class="topnav" id="myTopnav"></div>
<script src="jquery-3.2.1.min"></script>
<script src="javascript.js"></script>
  </body>
</html>