Grow your CSS skills. Land your dream job.

[Solved] Creating a rollover affect to a box

  • # September 21, 2010 at 8:57 pm

    Im trying to figure out how to add a rollover affect to a box, so that when a user rolls over that specific box, an affect gets added to it, similar to a link. I’ve linked to a picture of what Im talking about. If anyone can help, it would be greatly appreciated.

    # September 21, 2010 at 11:01 pm

    Chris,
    If this section will be wrapped in an anchor tag, you can use the hover pseudo class to change out the background or add a box-shadow in css. If it isn’t wrapped in an anchor tag, you could use jQuery to accomplish the hover effect.

    It really depends on how you are coding it and what kind of browser support you need. The jQuery hover route with css3 box shadow is probably the smartest way to go. Your IE viewers won’t see the drop shadow, but it will still be perfectly usable.

    Hope that helps,
    Paul

    Bob
    # September 22, 2010 at 3:35 pm

    You don’t even need an anchor tag for that Chris, you can give a hover pseudo class to a div element as well, like this:

    html:

    css:

    #test {	 width: 500px;
    height: 200px;
    background-color: gray;
    }
    #test:hover { border: 1px solid black;
    }

    So when you hover your mouse over the #test div, it gets a 1px solid black border.

    # September 22, 2010 at 3:55 pm

    ya u can definetly put a hover on divs or like

    # September 22, 2010 at 5:56 pm

    I tried the pseudo class, and it didn’t work. Then I made sure everything was right, and it still didn’t work. I’ll try again, and thanks everyone for the comments!

    Bob
    # September 23, 2010 at 2:57 am

    Could you please post your the code you’re using then? Also, what browser did you test it in?

    # September 23, 2010 at 3:21 am

    Isnt there a quotation missing in the div?

    Bob
    # September 23, 2010 at 3:45 am

    You’re absolutely right, thanks! Fixed.
    I just noticed there’s one missing in @zackw‘s code as well.

    # September 23, 2010 at 6:15 am

    I fixed my problem. It’s one of those “starring at the code for 30 minutes” problems. Man, I do hate hate those kinds of mistakes..

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Projects

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.

*May or may not contain any actual "CSS" or "Tricks".