Question

这是一个代码

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

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

Answer 1

由于CSS似乎无法处理此问题，请尝试使用JavaScript

＆＃13;

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

＆＃13;

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

＆＃13;

或使用兄弟姐妹

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用纯css无法向后退。你可以采用层叠方式。

但是，你可以用JQuery做到这一点。喜欢：

＆＃13;

$(document).ready(function(){
    $(".link2").mouseover(function(){
        $(".link1").css("color", "red");
    });
     $(".link2").mouseout(function(){
        $(".link1").css("color", "black");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" class="link1" href="#" >About</a>
 <a id="link2" class="link2" href="#">Contact us</a>

＆＃13;

希望它有所帮助。

Answer 3

CSS无法选择以前的兄弟姐妹。您可以使用JavaScript：

var links = [].slice.call(document.querySelectorAll('.menu_item'));

function hover(event) {
   var pre = this.previousElementSibling,
       method = event.type === 'mouseenter' ? 'add' : 'remove'; 

   if (pre) {
       pre.classList[method]('active'); 
   }
}

links.forEach(function(el) {
    el.addEventListener('mouseenter', hover);
    el.addEventListener('mouseleave', hover);
});

上面的代码假定a元素的类menu_item和类active应添加到hovered元素的上一个兄弟中。

Here is a demo

Answer 4

使用JavaScript执行此操作（link1的颜色在link2悬停时更改）。您需要使用html代码属性，例如onmouseover和onmouseout。

试试这段代码。用于在link1悬停时更改link2的颜色。

<html> 
<head>


<script>

function colorchange(){
 document.getElementById("link1").style.color="red";
}
function colorchange2(){
 document.getElementById("link1").style.color="blue";
}
</script>
</head>
<body>

<a id="link1" href="#" >About</a>
 <a id="link2" onmouseover="colorchange()" onmouseout="colorchange2()" href="#">Contact us</a>

</body>
</html>

Answer 5

我想这就是你要找的东西首先，您需要将链接包装在像

这样的容器中

<div class='container'>
    <a id="link1" href="#" >About</a>
    <a id="link2" href="#">Contact us</a>
</div>

然后应用此样式

.container:hover a:not(:hover){
    color:red;
}

css only demo here
更新的
正如我在评论中所说的那样，我想你想改变所有未发现的链接的样式，但是如果你想在link2悬停时只改变link1，但是当link1悬停时你不能改变link2的样式你可以写你这样的css
second demo

.container:hover a:first-child:not(:hover){
    color:red;
}

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

5 个答案: