Forums

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

Home Forums CSS First website – hover problem

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #29124
    mdix
    Member

    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/

    #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!

    #76393
    mdix
    Member

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

    #76426
    mdix
    Member

    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.

    #76430
    virtual
    Participant

    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
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.