MouseOver on Text: Rectangular Box

[chome4]

I can do Flash Text but how do you get a rectangular box to appear around text when hovering the mouse like on this site:

http://www.guardian.co.uk/

Under the heading guardian.co.uk the line of text on two levels has mouseovers that affect the background of the text as if it's in box.

How is this done?

Thanks in advance.

[Corrosive]

It is done using the psuedo link styles in CSS. Something like (change to suit)...

a:link {padding: 5px 8px; display: block;}
a:visited {padding: 5px 8px;  display: block;}
a:hover {padding: 5px 8px; background-color: #f00;  display: block;}
a:active {padding: 5px 8px; background-color: #f00;  display: block;}

That is a very basic example but the theory is that the padding round the link and the display block rule creates the 'box' effect and the background colour on hover will make it coloured.

[chome4]

Thanks for that.

[gentleone]

Originally Posted by Corrosive

It is done using the psuedo link styles in CSS. Something like (change to suit)...

a:link {padding: 5px 8px; display: block;}
a:visited {padding: 5px 8px;  display: block;}
a:hover {padding: 5px 8px; background-color: #f00;  display: block;}
a:active {padding: 5px 8px; background-color: #f00;  display: block;}

May I simplify this rule, Corrosive?

a {display: block; padding: 5px 8px}
a:hover, a:active {background-color: #f00}

[edbr]

good to show both IMO, corrosives example is clearer to understand for some beginners but of course gentleone's example is neet clean code

[Corrosive]

Originally Posted by edbr

good to show both IMO, corrosives example is clearer to understand for some beginners but of course gentleone's example is neet clean code

Yep, got it in one. I remember being totally baffled by shorthand when I started so I wanted the simplest example to help get the concept then shorthand is absolutely the way to go to keep pages light 'n' healthy