Help with CSS - Dev Shed

Dev Shed Forums Sponsor:

February 10th, 2013, 04:23 AM

writeinfrance

Registered User

Join Date: Feb 2013

Posts: 1

Time spent in forums: 5 m 35 sec
Reputation Power: 0

New Member - Help with CSS

Hi -

currently within style.css I have the following:

.page-item-56 a:hover {border-bottom: 8px solid red; border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}
.page-item-40 a:hover {border-bottom: 8px solid green; border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}
.page-item-49 a:hover {border-bottom: 8px solid blue;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}
.page-item-76 a:hover {border-bottom: 8px solid orange;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;}

This means when I rollover page-item-40 a GREEN line appears below the word CONTACT.

How do I also make an image appear above the word CONTACT -

so, when I rollover the word CONTACT I would like a speech bubble image to appear with contact information, as well as the current green line. Any help greatly appreciated..

thanks

Ian

February 10th, 2013, 05:11 PM

aeternus

For POny!

Join Date: Apr 2012

Location: Amsterdam

Posts: 416

Time spent in forums: 5 Days 4 h 56 m 43 sec
Reputation Power: 114

you can try to give the link some height and setting a background.

Code:

a.button{
   display:block; /* or inline-block */
   height: 100px;
   width: 200px;
}
a.button:hover{
background: url('../images/button.png') no-repeat;
}

__________________
PHP Tutorial

February 10th, 2013, 08:29 PM

DonR

Contributing User

Join Date: Oct 2009

Posts: 464

Folding Points: 29722 Folding Title: Starter Folder

Time spent in forums: 2 Weeks 2 Days 48 m 42 sec
Reputation Power: 216

why not just use the title attribute with your anchor/link tag to create a nice little tooltip style pop-up whenever someone hovers the cursor over that link?

Viewing: Dev Shed Forums > Web Design > CSS Help > New Member - Help with CSS

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump