Is there a way to highlight the target of a bookmark? (


I want to link to bookmark on a page ( AND visually highlight the item that was bookmarked (maybe having a red border). Naturally, there would be multiple items bookmarked. So that if someone clicked on #bookmark2 then that other area would be highlighted).

I can see how to do that with .asp or .aspx but I’d like to do it more simply than that. I thought maybe there was a clever way to do it with CSS.

WHY I’m interested:
– I want to have our programs link to a shopping page that lists all the programs on it. I’m using a bookmark so they’re jumping to the particular program area ( but just to make it obvious I’d like to actually highlight the page being linked to.


In your css you need to define

a.highlight {border:1px solid red;}

or something similar

Then using jQuery,

$(document).ready ( function () { //Work as soon as the DOM is ready for parsing
    var id  = location.hash.substr(1); //Get the word after the hash from the url
    if (id) $('#'+id).addClass('highlight'); // add class highlight to element whose id is the word after the hash

To highlight the targets on mouse over also add:

    .mouseover(function() {
        var id  = $(this).attr('href').substr(1);
    .mouseout(function() {
        var id  = $(this).attr('href').substr(1);

Answered By – Pat

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published