ホバー上のリンクカラーを変更する

Question

特定のホバーを他の特定のアイテムに変更することは可能ですか？例えば

：

<li> 
    <a href="#">test</a> 
</li> 

JS

var list = document.getElementById('li'); 
var link = document.getElementById('a'); 

list.onmouseover = function() { 
    link.style.color = "#8080ff"; 
} 

私はli項目の上にカーソルを移動した場合、私はaタグ内のテキストを変更したいのですが、このコードは動作しません。

私はcssまたはjqueryライブラリを使用できません。

http://jsfiddle.net/Nt8Pq/40/

Answer 1

あなたのコードは、IDを持つ要素を探し、あなたはIDを持っていません。タグ名でそれらを選択し、コレクションをループする必要があります。そしてあなたがコレクションの中にあるアンカーを見つける必要があるよりも。最後に

var menu = document.getElementById("menu"); 
 
var lis = menu.getElementsByTagName("li"); 
 

 
for (var i = 0; i < lis.length; i++) { 
 
    var li = lis[i]; 
 
    li.addEventListener("mouseover", function() { 
 
    this.getElementsByTagName("a")[0].style.color = "#8080ff"; 
 
    }); 
 
    li.addEventListener("mouseout", function() { 
 
    this.getElementsByTagName("a")[0].style.color = "#000000"; 
 
    }); 
 
}

<ul id="menu"> 
 
    <li> 
 
    <a href="#">test</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">test</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">test</a> 
 
    </li> 
 
</ul>

これはあなたが実際にスタイルを追加することはできませんので、もしあなただけのCSSルールを注入でき

ul li:hover a { 
    color : "#8080ff"; 
} 

を実装するためのコードがたくさんありますページ...

var sheet = window.document.styleSheets[0]; 
 
sheet.insertRule('#menu li:hover a { color: #8080ff; }', sheet.cssRules.length);

<ul id="menu"> 
 
    <li> 
 
    <a href="#">test</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">test</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">test</a> 
 
    </li> 
 
</ul>

Answer 2

これは、いくつかの簡単なHTMLイベント属性およびJavaScriptで行うことができます。

<li> 
<a href="#" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">test</a> 
</li> 

HTML Event Attributes

Answer 3

あなたはJSでそれをしたい場合は、ここに答えがあります。しかし、のようなあなたはそれをこのようにすべきではない、前に言った：

あなたはCSSやWebページのソースを変更することはできません、あなたは、単一のJavaScriptで立ち往生していると仮定すると、

<li id="list"> 
<a id="link" href="#">test</a> 
</li> 

var list = document.getElementById('list'); 
var link = document.getElementById('link'); 

http://jsfiddle.net/Nt8Pq/45/

Answer 4

あなたがウェブページのいくつかの機能を変更したい場合、このアプローチはうまくいくでしょう：

document.getElementsByTagName('li')のインデックスを使用して配列を返さなければならないという警告があります。たとえば、常に最初の要素が必要な場合は、このインデックスをゼロとしてハードコーディングできます。それ以外の場合は、変更したいものを探してコレクションを繰り返し処理する必要があります。

最後に、希望のリスト項目を見つけたらfirstChildElementのスタイルを変更できます。

var li = document.getElementsByTagName('li')[0]; 
 

 
li.onmouseover = function() { 
 
    li.firstElementChild.style.color = "#F00"; // red 
 
} 
 

 
li.onmouseout = function() { 
 
    li.firstElementChild.style.color = "#000"; // black 
 
};

<li> 
 
    <a href="#">Mouse over me.</a> 
 
</li>

Answer 5

var nodesArray = document.getElementById('myID').getElementsByTagName('a'); 
for (var i = 0; i < nodesArray.length; i++) { 
    nodesArray[i].style.color = 'red'; 
} 

このリンクであなたの解決策を見つけるでしょうできます。 - https://ubuntuforums.org/showthread.php?t=1692280