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?.
['https://Stackoverflow.com/questions/29598991', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4466855/']
Since CSS does not seem to be able to handle this, try JavaScript

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

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

Or using siblings

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

```html
<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>
```
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](http://jsfiddle.net/dxxbkLzt/).