CODEWITHSUNDEEP
jqueryhtmlcss
Phil Hanson
Phil Hanson

Reputation: 109

Change class for a div with jQuery

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;
}

Upvotes: 0

Views: 103

Answers (5)

Parth Chavda
Parth Chavda

Reputation: 1829

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;
}

Upvotes: 1

Derek Story
Derek Story

Reputation: 9583

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.

Upvotes: 4

vitally
vitally

Reputation: 377

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

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26434

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");
});

Upvotes: 0

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34189

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;
}

Upvotes: 2

Related Questions