Question

This is the 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 2nd anchor tag on hover state of 1st anchor tag? (And vice versa.)

Answer 1

Not with css. This kind of actions can only be done by script.

If you use jQuery you could 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 both a‘s an id, so you could reference them by using var a1 = $('#a1');.