First website – hover problem

[mdix]

Hi guys,

Great community here! The CSS screencasts and various forum posts have basically enabled me to fudge together my first website in CSS. It’s basically a site for a friend who’s an artist. My issue at the moment is that I can’t get a hover state to work using sprites. I’ve looked at screencasts that deal with this and tried various other googles but I can’s seem to work out what’s wrong. I have no knowledge of CSS, however, so that’s no surprise…

I also realise that the code is probably horrible and really bodged. Feel free to criticise / suggest improvements.

http://lindsaywood.x10.bz/

[ChrisRadford]

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!

[mdix]

That’s working great now. Makes perfect sense. Thanks a lot for the help!

[mdix]

Right, after the previous help I’ve been progressing with the website and I’ve hit another hover snag. Hover seems to be my enemy at the minute…

I’m trying to do exactly the same thing with the social links at the bottom (facebook etc.) to no avail. As far as I can see I’ve done exactly the same as I did for the navigation links, but it just won’t work. As it stands I’ve changed the social links to a. classes just because it was the last thing I’ve tried.

This time the URL is http://test.lindsaywood.x10.bz/

Any ideas???

Many thanks in advance.

[virtual]

You are giving a class to the a tag when you should be giving the class to the li tag like in your navigation.

It should read

Code:

ul#sociallinks li.facebook a

and the hover state

Code:

ul#sociallinks li.facebook a:hover

[Author]

Posts