Grow your CSS skills. Land your dream job.

Mouseover changing separate div?

  • # September 6, 2009 at 8:20 pm

    *EDIT i should add i am using wordpress as a CMS, not sure how i would use jquery in wordpress as i am learning to use wordpress as a cms so don’t know how to add jquery into yet*

    My brain is kind of broken right now (can’t for the life of me remember how this is done properly),

    Let me paint a picture of what i am trying to do and you can figure out the best way to go about doing it. I have a navbar that i took from photoshop using one image its a solid image with all the nav already drawn on it.

    I want to make it so when you hover over the parts of the image that the nav is written on, the image changes to the another one i have where the one you are moused over is scribbled out.

    The way i thought to do this was like this

    Style :

    Code:
    #home { height:100%; width:50px; float:left;}
    #about { height:100%; width:50px; float:left;}
    #portfolio { height:100%; width:50px; float:left;}
    #blog { height:100%; width:50px; float:left;}
    #nav{ background:url(whateverimage.jpg);height:50px; width:200px; float:left;}

    inside body:

    Code:

    But i can’t for the life of me remember how i would do it that i mouse over the about div (nothing in it it would just be there, and change the background of nav div.

    Any help would be amazing.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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