Question

请帮我解决这个问题。我正在尝试将CSS样式应用于我拥有的这个Javascript代码。

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

有人能给我一个如何做到这一点的例子吗？

我是初学者并且不知道如何制作这样的东西

＆＃13;

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 );

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

当你悬停它时改变元素的样式不需要任何“JavaScript魔法”，这是一个简单的CSS用例。您可以使用:hover peudoselector定义一个类，以便在鼠标移过它时更改元素的样式。

在您的示例中，这看起来像这样：

.nav-link:hover {
    color: white;
}

＆＃13;

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 );

＆＃13;

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: white;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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 );

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

您可以使用普通的旧CSS来完成此操作。请注意添加到css文件的a:hover样式。

＆＃13;

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 );

＆＃13;

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;
}

a:hover {
  color: #FFF;
  text-decoration: none;
}

＆＃13;

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

＆＃13;

将CSS应用于Javascript代码

3 个答案: