Hover effect on list items

Hover effect on list items (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

ram859 -> 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 -> 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...

ram859 -> 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

bobby -> 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 [;)]

Spooky -> 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/

bobby -> RE: Hover effect on list items (9/4/2003 10:38:28)
great link Spooky, that's such a good site...

Page: [1]

0.0625