仅在悬停 javascript 时更改链接颜色

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>

最后这是很多代码要实现

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

因此，如果您无法实际向页面添加样式，则可以只注入 CSS 规则...

 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 事件属性

Answer 3

如果你想用 JS 来做，这里是答案。 但就像之前说的，你不应该这样做：

<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

假设您无法修改 CSS 或网页的源代码，并且您只能使用一个 javascript 文件来修改网页的某些功能，那么这种方法将起作用：

一个警告是你必须在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