Grow your CSS skills. Land your dream job.

What am i doing wrong? Jquery w/ mouseover

  • # January 30, 2012 at 6:32 pm

    My goal is when someone hovers over the id of “btnHome” the body background color will change to the same color as “btnHome”

    html:








    css:


    body {
    background:#696969;
    }
    .nav-button {
    width:176px;
    height:150px;
    float: left;
    font-family:helvetica;
    text-align:center;
    font-size:20pt;
    color:white;
    }
    #btnHome {
    background:#1E90FF;
    height:80px;
    padding-top:50px;
    display:none;
    margin:10px 5px 10px 10px;
    }

    The display none is for another jquery function,a simple load slidedown



    I am very stumped, i am not to strong with jquery, any help?

    # January 30, 2012 at 6:34 pm

    You forgot the “c” in your first “function”. :)

    # January 30, 2012 at 6:36 pm

    Oh wow, no way i spelt function wrong.. lol thanks

    # January 30, 2012 at 6:46 pm

    Well i had fixed my spelling, it is working in jsfiddle but not in the browser…? (Chrome latest version.)

    How do i give it a mouseout or return false; to get back to its original color value?

    http://jsfiddle.net/jD9F6/1/

    # January 30, 2012 at 7:15 pm

    I personally prefer to use mouseenter instead of mouseover (as well as mouseleave): http://jsfiddle.net/jD9F6/2/

    # January 30, 2012 at 9:43 pm

    @Senff,

    If you copy all those into an html file will it do the same. I cannot get it to work inside my browser, but it will work in JSFiddle ?

    # January 30, 2012 at 10:07 pm

    Got it, the functions must be inside of the onload functions



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

You must be logged in to reply to this topic.

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