设置父元素的颜色会改变除链接之外的所有文本的颜色

Question

将鼠标悬停在特定元素（表格）上时，我正在使用此代码更改网页上所有文本的文本颜色：

document.getElementById("one").onmouseover = function() {mouseOver()};
document.getElementById("one").onmouseout = function() {mouseOut()};

function mouseOver() {
  document.getElementById("all").style.color = "white";
}

function mouseOut() {
  document.getElementById("all").style.color = "black";
} 

我要更改颜色的页面上的所有文本都在 ID 为"all"的<div>中，并且此脚本可以完全更改所有文本的颜色，但链接内的文本除外（ <a href="url.com">this text will not change color!</a> ）。

我尝试将"all" ID 添加到链接中，但这也不起作用。 有没有办法让链接改变颜色？

Answer 1

a 元素由系统设置样式，除非您覆盖它。

执行此操作的一种方法是更改鼠标悬停/移出操作以向所有元素添加/删除 class 以使文本变为白色。 然后您还可以 select a 元素。

这是一个片段：

 <style> #all.mouseover, #all.mouseover a { color: white; } </style> <div id="one">Mouseover me</div> <div id="all"> Text here <a href="#">and this is a link </a> </div> <script> document.getElementById("one").onmouseover = function() {mouseOver()}; document.getElementById("one").onmouseout = function() {mouseOut()}; function mouseOver() { document.getElementById("all").classList.add('mouseover'); } function mouseOut() { document.getElementById("all").classList.remove('mouseover'); } </script>

我不确定您是否希望 a 元素文本在鼠标未悬停时保持黑色或保持默认系统蓝色。 如果你想让它变黑，那么在 CSS 中添加#all a {color: black;} 。