How should i hightligt any link on mouseover in my page ?

Question

Hi,

i want to hightlight any link in my website when mouseover event happens on them. I want this to happen for any link in my web site.. I dont want to write onmouseover attribute in every link i create and there should be some place where i can declare this highlight effect globally .

How should i do this ?

Answer 1

Your best bet is either to write your own selector, or use a selector function in something like jQuery.

That way you can just do a mouseover function on any a element on the webpage.

For more if you want to do it yourself then you can look at the links at the bottom of this page: https://developer.mozilla.org/En/DOM/Locating_DOM_elements_using_selectors

Answer 2

you can do this simply through CSS?

<style="text/css"><!--
  a,a:visited{color:#AA0000;text-decoration:none;}
  a:hover{color:#00AA00;text-decoration:underlined;}
--></style>

<a href="URLhere">Link1</a><br/>
<a href="URLhere">Link2</a><br/>

Answer 3

Something like this should work fairly well:

a:hover {
    color: white;
}

Answer 4

Use CSS. You should use external file if you wnat to make it same for you whole site.

a:hover 
{
  background-color: rgb(255, 255, 0);
}

You may use class or something else. Such as JS. But I think the above example would be OK if you want to make it for all links.

Answer 5

If you're looking to do minimal styling on links on events like 'hover', you don't need JS at all:

a { color:blue; }
a:hover { color:red; }

If you're going beyond that and possibly adding balloon style hovers you'll most likely need to rely on Javascript, it might help clarifying exactly what you mean by highlight.

Answer 6

If you want to expand this to non-anchor tags, use jQuery.

$('div').click( function(){ 
   $(this).addClass("hovered');
} );