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;
}
:hover
state?.grid_hover
to.grid:hover
$(this).toggleClass('grid_hover');
Take out the period, but like dwreck08 wrote, why not just use the hover state:hover