仅在悬停 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 规则...

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

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