Remote controlled hyperlinks (or multiple links in one hyperlink)

This is a little development technique I dreamt up the other day. I’m not even one-hundred percent sure what to call it, but due to what it does, which you’ll find out in a second, I think remote controlled hyperlinks will (sort of) do… I put it into practice on Suze’s new site, in the sidebar.

Imagine you have a piece of running text like ‘read more about me or get in touch’. Here we have two actions; read more and make contact. Let’s also imagine that your about page and contact page are one and the same; the contact section is just your email address on that page. What I wanted was a cool way of giving the impression of two separate links to the same page but also making clear that the two links both did the same thing.

Demo

What I came up with was this, a way of hovering one link whilst giving the impression of hovering any number of quasi-links inside it.

What this does is removes all link styles and evidence of being a link (hover states, cursor and outline) from the a and applies those styles to spans inside it. When you hover the a, only any spans inside it change, and when you click anywhere in the link, both spans have active, outlined states.

The code

<p>Read more <a href="#" class="multi-links"><span>about me</span> and <span>contact me</span></a>.</p>

<p>Why not <a href="#" class="multi-links"><span>search</span> and <span>read</span> my archives</a>?</p>

a,.multi-links span{
  font-weight:bold;
  color:#c00;
  text-decoration:none;
  cursor:pointer;
}
.multi-links,.multi-links:hover,.multi-links:active,.multi-links:focus{
  position:static;
  text-decoration:none;
  font-weight:normal;
  color:#333;
  outline:none;
  cursor:text; /* Updated as per http://csswizardry.com/2010/12/remote-controlled-hyperlinks-or-multiple-links-in-one-hyperlink/#comment-22244 */
}
a:hover,a:active,a:focus,.multi-links:hover span{
  text-decoration:underline;
}
a:active,a:focus,.multi-links:active span,.multi-links:focus span{
  position:relative;
  top:1px;
  text-decoration:underline;
}
.multi-links:active span,.multi-links:focus span{
  outline:1px dotted #c00;
}

Caveats

Of course this can only work where the two links are one after the other because (as you know) you cannot stagger the nesting of tags. This of course limits its usefulness somewhat.

Concerns

This presentation and behaviour goes against most known link conventions, it could well be pretty confusing. If you were to use this at all, I think it’d be best left for use on a site where the users are likely to be more tech savvy than your usual.

I think it’d look pretty cool on a portfolio type site, or a personal site such as Suze’s where the copy lends itself well.

Anyway, there it is, nothing groundbreaking but a pretty cool and interesting effect.

Tweet Follow @csswizardry

By Harry Roberts on Monday, December 20th, 2010 in Web Development. Tags: CSS, HTML, Hyperlinks | 15 Comments »

15 Responses to ‘Remote controlled hyperlinks (or multiple links in one hyperlink)’

Derek said on 20 December, 2010 at 9:43 pm

Brilliant as always. To take it a step further, you could encase the middle text in a classed span, and use a :not pseudo-element to negate the hover effects when someone hovers over ‘and’ (and perhaps even control the cursor to give the illusion of no link). Way too much work for what it’s worth, but could be done.
Gabor said on 20 December, 2010 at 11:49 pm

Sweet! To take it one step further, why not use jQuery? I am aware that it adds a bit of extra code, a separate js library needs to be called, and is not as minimalistic as your solution, but it adds the option to actually do anything with the links.
```
$(".selector").hover( function () {
   $(this).css("color","blue").css("text-decoration","underline");
} );
```
This would add the two css styles to all elements with class selector whenever you hover over any of them.
Christoph said on 30 December, 2010 at 5:17 am

Well, I think you used a:hover because old IEs won’t
support hover on other elements. But its kinda confusing if you
text-decoration:underline all spans (even when in multiple lines
but in same “link tag”). What about adding a a>span:hover to
the CSS? then the other, newer browsers would display it just like
the old behaviour was. Greetings, Chris
Christoph said on 30 December, 2010 at 5:21 am

Well, just forget what I wrote last. I think I would make
it clear these links are doing the same thing with another
decoration – e.g. changing the color of both, but underlining only
the hovered element. I misunderstood your post first, sorry
=)
stenehall said on 30 December, 2010 at 9:32 am

Found the idea interesting so I wrote a small jquery plugin
that does this for you, no extra markup needed (just an a.hover css
class). http://stenehall.github.com/jquery.multilinks/ It’s far
from done but it demonstrates how it can work. It does have one pro
compared to the css only solution. It wont hover the links when
you’re hovering the text between the “links” and it lets you have
the links anywhere you want on your page. But it does require that
the user have javascript enabled.
Will Morgan said on 31 December, 2010 at 9:48 am

@Gabor: Because there is no need to use jQuery. Everything you suggested doing in your jQuery snippet is easily achievable using CSS; ironically enough it’s what CSS is designed to do.
Stephanie Bertha said on 14 January, 2011 at 3:48 pm

Thanks for the thought and demo. Nothing ground breaking like you said, but it could be on someone else’s design, so it’s appreciated.

One thing you could do is make sure the “and” in between those links looks selectable by using the “text” cursor.
```
a.multi-links {
cursor: text !important;
}
```
That’s the only thing I would change, but I like it!
Paul said on 15 April, 2011 at 12:59 am

In Chrome the site you reference is completely blank:

http://suzannahaworth.com/

… looks like all the HTML (text & photos) is there, maybe just some bad CSS blocking the display.

Chrome 12.0.733.0
Christopher Anderton said on 16 May, 2011 at 1:26 pm

Paul. You are running a beta of Chrome. Try to run on a release version (it works).
Thomas said on 16 May, 2011 at 5:31 pm

Thanks like the article I saw something similar to this on css-tricks.com a while ago called remote linking. Might help build upon the idea some good examples.
http://css-tricks.com/remote-linking/
jeff said on 17 May, 2011 at 9:34 am

I don’t understand what is achieved exactly here, can some explain for dummies?
chaos said on 17 May, 2011 at 9:44 am

You can also apply pointer-events property:

.multi-links {
pointer-events: none;
}

.multi-links span {
pointer-events: auto;
}

“Non-link” text’s cursor though will not change to “text” cursor, so we need to specify cursor property for a container:
p { cursor: text; }
chaos said on 17 May, 2011 at 9:49 am

Oh, I forgot to mention: this only works in Firefox 3.6+ and Chrome 4+

and the url: http://dev.w3.org/csswg/css3-ui/#pointer-events
Henrique said on 17 May, 2011 at 11:03 am

This will mess up search engines somewhat, as the whole text will be the link text.
Jukka said on 18 May, 2011 at 7:01 am

I think there should still be some sort of indication that the whole sentence is a hyperlink. Maybe leave out the removing of the hand cursor. Otherwise the user might think that it’s just two hyperlinks with text-decoration underline when a span that surrounds the sentence is hovered. Clicking on the text outside the two section links might surprise the user when she/he is suddenly fetching a different page.
In my opinion just having two anchors with the same href inside a span that surrounds the whole text would be better practice. Cool idea nevertheless!

Demo

The code

Caveats

Concerns

15 Responses to ‘Remote controlled hyperlinks (or multiple links in one hyperlink)’

Leave a Reply