css - 如何在悬停另一个链接时更改链接的颜色？

Question

代码如下

 <a id="link1" href="#" >About</a>
 <a id="link2" href="#">Contact us</a>

我希望在悬停 link2 时更改 link1 的颜色。 有可能用 css 吗？

Answer 1

既然 CSS 似乎无法处理这个问题，试试 JavaScript

window.onload=function() {
  document.getElementById("link2").onmouseover=function() {
    document.getElementById("link1").style.color="red";
  }
  document.getElementById("link2").onmouseout=function() {
    document.getElementById("link1").style.color="blue";
  }
}

 <a id="link1" href="#" >About</a>
 <a id="link2" href="#">Contact us</a>

或者使用 sibling

function prevSib(elem) {do { elem = elem.previousSibling;} while ( elem && elem.nodeType !== 1 ); return elem; }

window.onload=function() {
  document.getElementById("link2").onmouseover=function() {
    prevSib(this).style.color="red";
  }
  document.getElementById("link2").onmouseout=function() {
    prevSib(this).style.color="blue";
  }
}

<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>