5 replies [Last post]
ecosmo
Offline
newbie
Last seen: 13 years 13 weeks ago
Joined: 2007-06-09
Posts: 7
Points: 0

I am trying to achieve the rollover effect using CSS. The image top half is for normal state and the bottom half is for hover state. I can't find anything wrong with the code but the background-position does not seem to take effect on the a:hover. Would you help me looking at it to see if there's anything I am doing wrong? This is the code.

Thanks!!!

<?php

Untitled Document

#nav {
overflow: hidden;
}

#nav ul {
list-style: none;
}

#nav a {
display: block;
padding: 33px 0 0 0;
width: 230px;
overflow: hidden;
/*margin: 5px auto;*/
height: 0px !important;
height /**/:33px; /* for IE5/Win */
}

#nav a:hover {
background-position: 0 -34px;
}

#nav #about a {
background: url(images/button_about.gif) no-repeat top left;
}

#nav #mission a {
background: url(images/button_mission.gif) no-repeat top left;
}

#nav #contact a {
background: url(images/button_contact.gif) top left no-repeat;
}

?>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

:hover has to come after the

:hover has to come after the :link and :visited states, so move it to the end (after #about etc.).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ecosmo
Offline
newbie
Last seen: 13 years 13 weeks ago
Joined: 2007-06-09
Posts: 7
Points: 0

Move a:hover to end doesn't help still

My code now is as below but it still doesn't work. Sad

<?php

Untitled Document

#nav {
overflow: hidden;
}

#nav ul {
list-style: none;
}

#nav a {
display: block;
padding: 33px 0 0 0;
width: 230px;
overflow: hidden;
/*margin: 5px auto;*/
height: 0px !important;
height /**/:33px; /* for IE5/Win */
}

#nav #about a {
background: url(images/button_about.gif) no-repeat top left;
}

#nav #mission a {
background: url(images/button_mission.gif) no-repeat top left;
}

#nav #contact a {
background: url(images/button_contact.gif) top left no-repeat;
}

#nav a:hover {
background-position: 0 -34px;
}

?>

ecosmo
Offline
newbie
Last seen: 13 years 13 weeks ago
Joined: 2007-06-09
Posts: 7
Points: 0

Image Used

If it helps, this is the image I use for the background.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Do this instead:

Do this instead:

#nav a {
    display: block;
    padding: 33px 0 0 0;
    width: 230px;
    overflow: hidden;
    /*margin: 5px auto;*/
    height: 0px !important;
    height /**/:33px; /* for IE5/Win */
	background-position: 0 0;
	background-repeat: no-repeat;
}

#nav a:hover { background-position: 0 -34px }

#nav #about a { background-image: url(images/button_about.gif) }

#nav #mission a { background-image: url(images/button_mission.gif) }

#nav #contact a { background-image: url(images/button_contact.gif) }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ecosmo
Offline
newbie
Last seen: 13 years 13 weeks ago
Joined: 2007-06-09
Posts: 7
Points: 0

It works!!!

Works great!!!! Thanks a bunch!!!! :thumbsup: