Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS First website – hover problem Re: First website – hover problem

#76363
ChrisRadford
Member

Your CSS will work fine, you just need to alter the definitions slightly.

For a full run through of css classes see this article: https://css-tricks.com/multiple-class-id-selectors/

Since you have applied the class names to the <li> elements not the <a> elements you need to defined the two change of background rules as follows:

Code:
ul#nav li.paint a:hover, ul#nav li.ceramics a:hover {
background-position: center bottom;
}

however as your background isn’t applied to your <a> but to your <li> you’ll need to apply the background to your <a> (some versions of IE don’t support hover on non-<a> elements):

Code:
ul#nav li.paint a {
width: 111px;
background: url(“images_main/paintlink.gif”);
background-position: center top;
}

ul#nav li.ceramics a {
width: 252px;
background: url(“images_main/ceramicslink.gif”);
background-position: center top;
}

and remove the background rule from the li’s.

Hope that helps & all makes sense!