JavascriptコードにCSSを適用する

-1

これで私を助けてください。私はこのJavascriptコードにCSSスタイルを適用しようとしています。JavascriptコードにCSSを適用する

私はHover/or mouseoverを含むことを望みます。例えば、テキストの色は白で、下線などはありません。

誰かが私にそれを行う方法の例を教えてもらえますか？

私はこれで初心者ですし、あなたは、昔ながらのCSSを使用してこれを実現することができ、この

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>

出典

2017-10-22 Andrei Ref

あなたのCSSでは、あなたのリンクにいくつかの '：hover'セレクタを使うべきです。 – Xufox

、あなたのリンクこのような.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>

あなたの例では、これは次のようになります

出典

2017-10-22 19:13:34

のようなものを作る方法を知りません。 CSSファイルにa:hoverスタイルが追加されていることに注意してください。あなたはそれがどんな「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; 
 
} 
 

 
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>

出典

2017-10-22 19:11:04 Nick

ありがとうございます。これは私の一日を作った:) –

これは、JavaScript上で作成したものだけでなく、すべてのリンクを白い背景にします。 –

、これはCSSの簡単な使用例です。 :hoverピュードロセレクターでクラスを定義して、マウスが上に移動したときにエレメントのスタイルを変更することができます。 CSSで

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

出典

2017-10-22 19:13:08

JavascriptコードにCSSを適用する

答えて

関連する問題