CODEWITHSUNDEEP
htmlcsshyperlinkhoveranchor
user2219424
user2219424

Reputation: 13

combining html link anchor with css hover

In order to further my CSS knowledge I've been attempting this, but I'm not even sure it's possible.

I have a list of 50 links, 1 per line going down the page. There is very little vertical padding/margin between each link. Each link has been assigned an individual HTML id, e.g.

<a id="test" href="temp.html">blaghblagh</a>

so that visiting http://example.com/temp.html#test will change the page focus to the specific link id.

What I'm wanting is when a temp.html#test url is visited, the #test id link anchor will cause the link to "stand out" by placing padding/margin around the link.

I've been trying to combine it with a:hover and all kinds of stuff but to no avail. Any advice would be greatly appreciated.

Upvotes: 1

Views: 1526

Answers (6)

Curtis
Curtis

Reputation: 103358

This cannot be done with pure CSS, but it is achievable with Javascript/jQuery.

Shameless plug, but I wrote an article on how to achieve this which you might find useful.

http://curtistimson.co.uk/js/reading-url-hashtag-values/

if (window.location.hash){
      var hash = window.location.hash.substring(1); //gets id in URL
      $("#" + hash).css("padding", "10px"); //applies padding to that element
}

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You need to use :target pseudo selector:

a:target {
    padding-left: 20px;
    color: red;
}

Demo: http://jsfiddle.net/dfsq/QuFHp/

The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same. (http://css-tricks.com/on-target/)

IE supports it starting from version 8. If you need to support older browsers you have to use javascript:

var hash = location.hash;
if (hash) {
    document.getElementById(hash.replace('#', '')).className = 'active';
}

Upvotes: 4

Axente Paul
Axente Paul

Reputation: 553

Try. a:visited{ color: red; }

Find out more about Pseudo-Classes small documentation

Upvotes: 0

Aioros
Aioros

Reputation: 4383

The selector you're looking for is :visited:

a:visited {
    padding: 5px;
    margin: 5px;
    /* or whatever you want, really */
}

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128791

There's a :visited selector specific to anchor tags:

a:visited {
    padding:10px; /* Whichever values you wish to use. */
    margin:10px;
}

Upvotes: 1

Rick Donohoe
Rick Donohoe

Reputation: 7271

I don't think you can do this normally with CSS. You would have to add a jQuery function which checks to see if there is an ID appended to the URL and if so add a class to that link.

Where are you going wrong with a:hover? Post some code and I'll update my answer to get that working.

Upvotes: -1

Related Questions