How to change the color of another link on hover?

Question

This is simple HTML code:

<li class="main"> <a href="#">ImageLink</a> <!--1st anchor tag--> <a href="#">ImageName</a> <!--2nd anchor tag--> </li> 

Is it possible to change the color of the 2nd anchor tag to the hang state of the 1st anchor tag? (And vice versa).

Answer 1

Not with css. This kind of action can only be performed using a script.

If you are using jQuery, you can add the following script:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript> $(document).ready(function(){ var a1 = $('a:first'); var a2 = $('a:second'); a1.hover(function(){ a2.toggleClass('hover') }, function(){ a2.toggleClass('hover') }); a2.hover(function(){ a1.toggleClass('hover') }, function(){ a1.toggleClass('hover') }); }); </script> 

Now you can use the hover class to specify the color:

 .hover { color: red; } 

Edit It would be easier to give id a id, so you can reference them with var a1 = $('#a1'); .

Answer 2

With CSS, you can change the color of the second anchor tag when you move the 1st anchor tag to the selector, but I don't think you can do it the other way around:

 a:hover + a { color: red; } 

JSFiddle preview: http://jsfiddle.net/9Ezt5/

See http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

However, note that adjacent selector clips are not supported in all browsers: http://www.quirksmode.org/css/contents.html

Answer 3

Yes, you can do it with pure css.

eg:

 a:hover + a{ background:red; } 

Check it out for more

http://jsfiddle.net/Bw5by/

Answer 4

In jQuery you can do it like this:

 $("#first").hover(function(){ $('#second').css('color','red') },function(){ $('#second').css('color','blue') }); 

See here in action,

http://jsfiddle.net/gagan/NYAHY/1/

Answer 5

If these are the only two links in the list item tag, you can do something like this:

 li.main:hover a { color: red; } li.main a:hover { color: blue; } 

Then your freezing link will be blue, and all the others (in this case, only another) will be red.