PDA

View Full Version : MouseOver on Text: Rectangular Box


chome4
01-02-2011, 09:28 AM
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
01-02-2011, 09:47 AM
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
01-02-2011, 12:02 PM
Thanks for that.

gentleone
01-02-2011, 12:16 PM
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
01-03-2011, 01:12 AM
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
01-03-2011, 10:01 AM
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 :)