0

I am a novice at jQuery and I've looked up online and with stack overflow search but can't get this working. I'm trying to change the class for a div on a mouse rollover.

My html for the div is:

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript-jQuery Sandbox Practice</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <script src="js/default.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="grid1">
                <div class="grid">Grid 01</div>
                <div class="grid">Grid 02</div>
                <div class="grid">Grid 03</div>
                <div class="grid">Grid 04</div>
            </div>
            <div id="grid2">
                <div class="grid">Grid 05</div>
                <div class="grid">Grid 06</div>
                <div class="grid">Grid 07</div>
                <div class="grid">Grid 08</div>
            </div>
            <div id="grid3">
                <div class="grid">Grid 09</div>
                <div class="grid">Grid 10</div>
                <div class="grid">Grid 11</div>
                <div class="grid">Grid 12</div>
            </div>
            <div id="grid4">
                <div class="grid">Grid 13</div>
                <div class="grid">Grid 14</div>
                <div class="grid">Grid 15</div>
                <div class="grid">Grid 16s</div>
            </div>
        </div>
    </body>
</html>

My css for the div is:

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

And hover css.

.grid_hover {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: #3ca1ff;
}

My js for the div is:

$(document).ready(function() {
    $('.grid').hover(function() {
        $(this).toggleClass('.grid_hover');     
    });
});

Thanks in advance.

Edit: Also, here is the site: http://tiny.am/sandbox/Javascript-jQuery/

Edit: It seems all I had to do was reorder the .css. Before it was: (No work)

#container {
    text-align:center;
}

.grid_hover {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: #3ca1ff;
}

#grid1 {
    float: inherit;
    padding-bottom: 5px;
}

#grid2 {
    float: inherit;
    padding-bottom: 5px;
}

#grid3 {
    float: inherit;
    padding-bottom: 5px;
}

#grid4 {
    float: inherit;
    padding-bottom: 5px;
}

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

After its: (Worky)

#container {
    text-align:center;
}

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

.grid_hover {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: #3ca1ff;
}

#grid1 {
    float: inherit;
    padding-bottom: 5px;
}

#grid2 {
    float: inherit;
    padding-bottom: 5px;
}

#grid3 {
    float: inherit;
    padding-bottom: 5px;
}

#grid4 {
    float: inherit;
    padding-bottom: 5px;
}
4
  • 1
    Is there a reason for not just using a css :hover state? Commented Nov 27, 2015 at 5:01
  • all you need to do is to change .grid_hover to .grid:hover Commented Nov 27, 2015 at 5:03
  • $(this).toggleClass('grid_hover'); Take out the period, but like dwreck08 wrote, why not just use the hover state :hover
    – Cory
    Commented Nov 27, 2015 at 5:03
  • The hover state could give unexpected results on mobile clicking where jQuery will not.
    – Shikkediel
    Commented Nov 27, 2015 at 5:25

5 Answers 5

4

With toggleClass, you don't need to add the period to the class name. If you remove the period it works:

JS Fiddle

$(this).toggleClass('grid_hover');    

NOT

$(this).toggleClass('.grid_hover');    

As a side note, you can do exactly what you want with css using the :hover state.

1
  • What's weird is I tried this as well, but it's not working on my page, hmmm. I see it working on the JS Fiddle example you linked. Gotta be something with the way I have it nested. Everything is in a container div then each group of 4 divs is in another div. When I try what I have in JSFiddle it doesn't work either so I'm close. I'm not targeting the nested/child (not sure what to call it) right. I'll keep working on it. This helped though. tiny.am/sandbox/Javascript-jQuery Commented Nov 27, 2015 at 15:05
2

You can use :hover CSS pseudo-class for this purpose, so that you won't need JavaScript at all.
There is also no need to repeat the unchanged CSS properties:

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

.grid:hover {
    background-color: #3ca1ff;
}
1

use $(this).toggleClass("grid_hover") not $(this).toggleClass(".grid_hover")

 $(".grid").on("mouseover", function() {
        $(this).toggleClass("grid_hover");
    });

you don't need to change class just simply apply this css you can get a desired output.

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
}

:hover is a pesudo class when you mouse over on ".grid" below css change will apply

.grid:hover {
    background-color: #3ca1ff;
}
0

In toggleClass, addClass and removeClass, there is no need for the period before the class name.

You can also use the mouseover event.

$(".grid").on("mouseover", function() {
    $(this).toggleClass("grid_hover");
});
0

do it like this. if you want the hover with jQuery

.grid {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: white;
} 

.grid:hover {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    padding: 5px;
    background-color: #3ca1ff;
}

$(document).ready(function() {
    $('.grid').hover(function() {
        $(this).addClass('.grid_hover');     
    });
});

Enjoy !!!!

1
  • The jquery isn't doing anything in your example. The CSS is. You have no .grid_hover class in the css. Commented Nov 27, 2015 at 5:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.