CODEWITHSUNDEEP
csshtmlhyperlink
Megh Gandhi
Megh Gandhi

Reputation: 103

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

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

Upvotes: 0

Views: 241

Answers (5)

Alin Mercasi
Alin Mercasi

Reputation: 83

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

Upvotes: 0

Md. Nasir Uddin Bhuiyan
Md. Nasir Uddin Bhuiyan

Reputation: 1596

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>

Upvotes: 0

Ram
Ram

Reputation: 144739

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.

Upvotes: 0

ketan
ketan

Reputation: 19341

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.

Upvotes: 0

mplungjan
mplungjan

Reputation: 178422

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>

Upvotes: 2

Related Questions