How to change the color of a link on hover of an another link?

Question

Here's a code

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

I want the link1's color to be changed when link2 is hovered. Is it possible with css?.

Yes, you can use JavaScript but CSS can't select previous siblings. — undefined, Apr 13 '15 at 06:36
try this: http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element — G.L.P, Apr 13 '15 at 06:41

score 2 · Accepted Answer · answered Apr 13 '15 at 06:38

Since CSS does not seem to be able to handle this, try 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>

Or using siblings

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>

you should accept as answer if it solved your issue. – ketan Apr 13 '15 at 10:32 — ketan, Apr 13 '15 at 10:32

score 0 · Answer 2 · answered Apr 13 '15 at 06:45

Using pure css it is not possible go backward. You can go in cascading ways.

But, you can do it with JQuery. like:

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

<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>

Hope it helps.

score 0 · Answer 3 · answered Apr 13 '15 at 06:46

0

CSS can't select the previous siblings. You can use 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);
});

The above code assumes that the a elements have class of menu_item and class of active should be added to the previous sibling of the hovered element.

Here is a demo.

answered Apr 13 '15 at 06:46

undefined

136,817
15
158
186

Does previousElementSibling return a text node for the whitespace between the links? Also classList is quite new and unsupported in quite a few browsers. Your answer seems unnecessary complicated for what it is supposed to achieve – mplungjan Apr 13 '15 at 06:50
@mplungjan No it doesn't. It refers to the previous HTMLElement sibling. That's what `previousSibling` property does. And regarding `classList`, many browsers support the API and you can also [shim it](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). – undefined Apr 13 '15 at 06:53

score 0 · Answer 4 · answered Apr 13 '15 at 06:59

Use JavaScript to do that( link1's color to be changed when link2 is hovered ). You need to use html tag attributes like onmouseover and onmouseout.

Try this code. For changing color of link1 when link2 is hovered.

<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>

Alin Mercasi · Answer 5 · 2015-04-13T12:55:27.697

0

I suppose this is what are you looking for.
First you need to wrap your links inside a container like this

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

and then apply this styles

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

css only demo here
UPDATE
As I said in may comment bellow I supposed you wanted to change the style of all unhovered links, however if you want to change only link1 when link2 is hovered , but not change style of link2 when link1 is hovered you could write you css like this
second demo

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

edited Apr 13 '15 at 12:55

answered Apr 13 '15 at 11:39

Alin Mercasi

83
9

Interesting - it does however also colour link2 when link1 is hovered – mplungjan Apr 13 '15 at 11:49
I thought that he has a set of links and wanted to change the style of all unhovered links, anyway just for two links without having to change the style of the second when the first is hovered, js is the only solution. – Alin Mercasi Apr 13 '15 at 12:17

How to change the color of a link on hover of an another link?

5 Answers5