Hovering one link, affecting another

[D.Rattansingh]

If we have 2 links t1 and t2 and I hover t2, is there any way to change the background of t1 with CSS or coud that only be done with javascript?

 

 

<div>

            <a href=# id="t1">   </a>

            <a href=# id="t2">   </a>

</div>

 

.t2:hover

{

                background-color: #CAFF70;

}

[sunfighter]

First .t2:hover is for a class not an ID like you have <a href=# id="t1">

 

The questions are = Are these the only two anchors? And is it ok to change the background of t2 when t1 is hovered?

 

[D.Rattansingh]

Sorry about that. The corrected code is:

 

<div>
            <a href=# id="t1">   </a>
            <a href=# id="t2">   </a>
</div>

#t2:hover
{
                background-color: blue;
}

 

These may not be the only anchors.

 

Yes if I do something like hover over t1, to change the background of t2. For e.g. the above would change the background of the link #t2. But what if I wanted to change the background of t1 instead?

 

I know this could be done with javascript but just wondering if it's possible with CSS.

 

DR.

[sunfighter]

<div id="hov">
            <a href=# id="t1">A really long link</a><br /><br />
            <a href=# id="t2">Another really long link</a>
</div>

#hov:hover  a
{
background-color: blue;
}

This will change both. You never answered if this is what you wanted.

[D.Rattansingh]

Sorry about the confusion.

 

With your example, what I want is to hover over the link t1 but t2 background colour changes (not t1).

[sunfighter]

I have been trying to do this in css, but I can come up with no solution. :-\  JS is the weasely way out.

[Zane]

use the plus selector to select the adjacent sibling element.

 

#t1:hover + t2 {
     background-color: green;
}

[haku]

That's the only way to do it, but it's not cross-browser compatible. Still, it's the only way you are going to do it.