stackoom
  简体   繁体   中英

Applying CSS into Javascript Code

 原文  2017-10-22 19:06:08  9   3    javascript/ html/ css

Question

Please help me out with this. I am trying to apply a CSS Style to this Javascript Code that I have.

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 answers

solution1
 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. You can define a class with the :hover peudoselector to change the style of an element when the mouse moves over it.

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>

solution2
 1 ACCPTED  2017-10-22 19:13:34

In CSS, use :hover on your links .nav-link 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; } .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>

solution3
 0  2017-10-22 19:11:04

You can accomplish this using plain old css. Note the a:hover styles added to the css file. 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Applying css to a javascript variable CSS/Javascript Not Applying In Production Applying CSS in JavaScript Applying CSS in JavaScript indirectly Applying CSS class to a Javascript Javascript code is not applying to all the css classes except the first one Internal CSS injected by JavaScript is not applying CSS menu not centered; javascript not applying? Applying CSS style to a button in Javascript CSS not applying on Javascript created element
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM