Hover effect on list items

	Home Register Search Help Login

Sponsors
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Hover effect on list items

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Hover effect on list items

Page: [1]


ram859 Posts: 7 Joined: 5/29/2003 Status: offline	Hover effect on list items - 9/2/2003 16:17:04 Is it possible to apply a hover effect on a bulleted list that has list-style-images for the custom bullet? I am trying to create a list for a navigation menu and I'm wondering if it is possible to change the image bullet on hover? I'm OK with the custom bullets applied in CSS but I'd like to get the hover effect on hyperlinks. Can't figure this out, need to know if someone has done this. I understand I could create the same effect using image hovers but I'm just curious if it can be done in CSS. Thanks, Roman

bobby

Posts: 11828
Joined: 8/15/1969
From: Seattle WA USA
Status: offline

RE: Hover effect on list items - 9/2/2003 16:27:24

There is no hover event for bullet lists, but you can create a bullet image for links that change on mouseover...

heres how I recently did it:

a.tab:link {
background-color: transparent;
background-image: url('images/g-block.gif');
background-repeat: no-repeat;
font-size: 1.4em;
font-weight: normal;
color: #000080;
text-decoration: none;
padding-left: 9px}
			
a.tab:visited {
background-color: transparent;
background-image: url('images/g-block.gif');
background-repeat: no-repeat;
font-size: 1.4em;
font-weight: normal;
color: #000080;
text-decoration: none;
padding-left: 9px}
            
a.tab:hover {
font-size: 1.4em;
font-weight: normal;
color: #ccff00;
background-color: transparent;
background-image: url('images/b-block.gif');
background-repeat: no-repeat;
text-decoration: none;
padding-left: 9px}
          
a.tab:active {
background-color: transparent;
background-image: url('images/g-block.gif');
background-repeat: no-repeat;
font-size: 1.4em;
font-weight: normal;
color: #000080;
text-decoration: none;
padding-left: 9px}

Notice that the background image is different on hover, and that I have a 9px left side padding...

The image is a 6px square, so the padding gives me 3px between the image and the text. The little block changes from green to blue on hover.

It isn't a bulleted list, but it resembles one since it has a bullet style image to the left of each link...

_____________________________

Talk to your kittens about catnip, or someone else will.

(in reply to ram859)


ram859 Posts: 7 Joined: 5/29/2003 Status: offline	RE: Hover effect on list items - 9/2/2003 16:43:45 bobby Thanks, I'll give that a try. Any chance you have a URL I could see the effect at? Thanks. Roman (in reply to ram859)


bobby Posts: 11828 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: Hover effect on list items - 9/2/2003 17:08:27 That code comes from www.richmondfood.com (only two of the links are working, I'm keeping the rest of the site hidden until we're ready to go live) The main navigation on the left is where you'll see it... <edit> You can modify how the image is positioned as well... the ones on my links will probably get centered vertically before all is said and done < Message edited by bobby -- 9/2/2003 2:12:21 PM > _____________________________ Talk to your kittens about catnip, or someone else will. (in reply to ram859)


Spooky Posts: 26723 Joined: 11/11/1998 From: Middle Earth Status: offline	RE: Hover effect on list items - 9/3/2003 0:55:17 This may be more information than you need :-) http://www.alistapart.com/stories/taminglists/ _____________________________ If you arent part of the solution, then there is good money to be made prolonging the problem Spky Database / DRW help Check out the Tutorials for Frontpage Databases Forum FAQ' s (in reply to ram859)


bobby Posts: 11828 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: Hover effect on list items - 9/4/2003 10:38:28 great link Spooky, that's such a good site... _____________________________ Talk to your kittens about catnip, or someone else will. (in reply to ram859)

Page: [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Hover effect on list items

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts