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。您需要通过标记名称选择它们并循环遍历集合。而且你需要找到集合内部的锚点。

＆＃13;

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";
  });
}

＆＃13;

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

＆＃13;

最后，这是很多实现的代码

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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做，这就是答案。但就像之前说的那样，你不应该这样做：

<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的样式。

＆＃13;

var li = document.getElementsByTagName('li')[0];

li.onmouseover = function() {
  li.firstElementChild.style.color = "#F00"; // red
}

li.onmouseout = function() {
  li.firstElementChild.style.color = "#000"; // black
};

＆＃13;

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

＆＃13;

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

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

5 个答案: