Multiple Remote Linking: An Example and How-To

Remote linking is a rollover that affects another object on the page. The rollover can affect itself as well. This can be done with PURE CSS, making it a very cool and lightweight technique.

In this example, you will see a row of colored circles across and a list of their names below. Rolling over the circle will highlight both the circle and the name. Likewise, rolling over the name will highlight both the circle and the name.

You can see the code is just a very simple unordered list with unique ID's attached to each list item. Of course, CSS3 will make this easier and remove the need for unique ID's, but that's another story...

The real trick here is giving the em inside the anchor relative positioning and then bumping it away with top/bottom/left/right coordinates. This keeps everything inside a single anchor element which is why the rollover automatically works on both elements. I love this technique, it's making me all giddy. =)

Share On

Comments

The other day, after reading your post “Links of Interest”, I watched the video of Doug Bowman, Beauty of CSS. He was talking about these Remote Rollovers, I thought they were great and decided to make some research for today.

And since I am subscribed to your RSS Feed, I have seen your example.

It is great, thank you very much, your tutorials are very easy to understand and vey straightforward.

@Volkan: Yep, that’s totally where I got the idea for this post. I thought that looks really neat and have never attempted to do that before. Also, your CSS suggestion looks sound and would lighten it up a bit — no harm either way.

In the video where I got this idea, Doug Bowman used it in a very cool way. He had the photos for several people in black and white lined up horizontally and their names listed in a list below. As you hovered over the photographs, they turned to color and their name highlighted.

He also used it another way which was even more interesting. He had a link in his footer to the hosting provider he was using. He wanted the same link on the upper right corner of his page as well. So he put an em element inside that link and gave the em absolute positioning throwing it up in the upper right corner. Same link, two places. It was very cool, and it helps keep you page lighter weight as well.

@Oriol: Yes! That is a great suggestion. I actually have always wondered if there was a way to get rid of those dumb lines. Especially when floating objects, they are really nasty. I was just completely oblivious to that CSS property.

@Jermayn: That’s essentially the deal. But it’s in situations where you want both the links to do the same thing is where it’s most useful, not just that it’s the same link. Actually, this technique could work for using the same anchor element to control 3, 4, 5, really unlimited number of objects on the page.

@Volkan: Both your ideas on this example have been spot on. That is really how you harness the Cascading part of CSS, to help keep things lightweight. Thanks for pointing out the opening html tag, I have that fixed on the page and on the download now.

About the button in IE…I’m not too concerned about it, it’s a nice little bonus for using Firefox I guess. You don’t get it in Safari either because of the default buttons Safari uses.

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.