![]() |
#1 |
![]() Join Date: Jan 2011
Posts: 5
|
![]() 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. |
![]() |
![]() |
![]() |
#2 |
![]() Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
|
![]() It is done using the psuedo link styles in CSS. Something like (change to suit)...
Code:
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;}
__________________
Websites: www.yotocreative.co.uk | www.clearwater-it.co.uk | www.bristolcomputerfix.co.uk Social Media: Twitter | Facebook Last edited by Corrosive; 01-02-2011 at 08:48 AM.. Reason: added display rule |
![]() |
![]() |
![]() |
#3 |
![]() Join Date: Jan 2011
Posts: 5
|
![]() Thanks for that.
|
![]() |
![]() |
![]() |
#4 | |
![]() ![]() Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
|
![]() Quote:
Code:
a {display: block; padding: 5px 8px} a:hover, a:active {background-color: #f00}
__________________
www.gentlemedia.nl |
|
![]() |
![]() |
![]() |
#5 |
![]() ![]() Join Date: Aug 2005
Location: Bali
Posts: 11,200
|
![]() good to show both IMO, corrosives example is clearer to understand for some beginners but of course gentleone's example is neet clean code
__________________
If you're happy and you know it shake your meds! different style links examples Flight / Hotel search Free script download Bali Villas |
![]() |
![]() |
![]() |
#6 | |
![]() Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
|
![]() Quote:
![]()
__________________
Websites: www.yotocreative.co.uk | www.clearwater-it.co.uk | www.bristolcomputerfix.co.uk Social Media: Twitter | Facebook |
|
![]() |
![]() |
![]() |
Thread Tools | |
Display Modes | |
|
|