将CSS应用于Javascript代码
[英]Applying CSS into Javascript Code
问题描述
Please help me out with this. 
这个你能帮我吗。 I am trying to apply a CSS Style to this Javascript Code that I have. 我正在尝试将CSS样式应用于我拥有的此Javascript代码。
I want it to contain Hover/or mouseover the color of the text be white for example and no underline or something like that. 我希望它包含悬停/或鼠标悬停在文本的颜色，例如白色，没有下划线或类似的东西。
Can someone give me an example of how to do that? 有人可以给我举个例子吗？
I am a beginner in this and don't know how to make something like this 我是一个初学者，不知道如何制作这样的东西
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>
3 个解决方案
解决方案1
1 2017-10-22 19:13:08
Changing the style of an element when you hover it does not require any “JavaScript magic”, this is a simple use case of CSS. 悬停时更改元素的样式不需要任何“ JavaScript魔术”，这是CSS的一个简单用例。 You can define a class with the :hover peudoselector to change the style of an element when the mouse moves over it. 您可以使用：hover peudoselector定义一个类，以在鼠标移到元素上时更改元素的样式。
In your example, this would look something like this: 在您的示例中，这看起来像这样：
.nav-link:hover {
color: white;
}
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: 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>
解决方案2
1 已采纳 2017-10-22 19:13:34
In CSS, use :hover on your links .nav-link like this: 在CSS中，对链接.nav-link使用:hover就像这样：
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>
解决方案3
0 2017-10-22 19:11:04
You can accomplish this using plain old css. 您可以使用普通的旧CSS完成此操作。 Note the a:hover styles added to the css file. 注意添加到css文件中的a:hover样式。
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; } a: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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.