將CSS應用於Javascript代碼
[英]Applying CSS into Javascript Code
問題描述
這個你能幫我嗎。 我正在嘗試將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>
3 個解決方案
解決方案1
1 2017-10-22 19:13:08
懸停時更改元素的樣式不需要任何“ JavaScript魔術”，這是CSS的一個簡單用例。 您可以使用：hover peudoselector定義一個類，以在鼠標移到元素上時更改元素的樣式。
在您的示例中，這看起來像這樣：
.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
在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
您可以使用普通的舊CSS完成此操作。 注意添加到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>
Javascript 代碼不適用於除第一個之外的所有 css 類
[英]Javascript code is not applying to all the css classes except the first one
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.