Trying to change the background-color of each div and make it stay that way once the mouse hovers over the div. Can't get it to change the color. What am I doing wrong? Here's the fiddle.
$('.container').on('hover', '#gridSquare', function(){
$(this).css('background-color', 'white');
});
Thank you in advance!
Trying to change the background-color of each div and make it stay that way once the mouse hovers over the div. Can't get it to change the color. What am I doing wrong? Here's the fiddle.
$('.container').on('hover', '#gridSquare', function(){
$(this).css('background-color', 'white');
});
Thank you in advance!
Share Improve this question asked Jul 23, 2015 at 8:21 hackrnauthackrnaut 5835 silver badges20 bronze badges 5-
3
Couldn't you do this with css
:hover? – dingo_d Commented Jul 23, 2015 at 8:23 - I'm trying to do this project using mostly jQuery, so that would be my preferred method. – hackrnaut Commented Jul 23, 2015 at 8:24
- jQuery shouldn't be used for simple tasks such as changing the background. Especially if you can do this with css, it's less taxing on the page. – dingo_d Commented Jul 23, 2015 at 8:26
- 1 Using JQuery when you can one-line it in CSS is just overkill... – Matt Commented Jul 23, 2015 at 8:27
- Your Id "gridSquare" is repeating.. You can see that on fiddle – Rino Raj Commented Jul 23, 2015 at 8:28
5 Answers
Reset to default 9No need to use jQuery, just use css selector :hover
#gridSquare:hover {
background-color: white;
}
Demo: Fiddle
If you want to use jQuery, you need to use mouseenter and mouseleave
$('.container').on('mouseenter', '#gridSquare', function () {
$(this).css('background-color', 'white');
}).on('mouseleave', '#gridSquare', function () {
$(this).css('background-color', '');
});
Demo: Fiddle
Update
As suggested below in the ments, ID of an element must be unique in a document so use class instead of id to group similar elements.
Demo: Fiddle
You have elements with the same id in DOM. You can use class instead and css :hover. No need to use jquery here:
$(document).ready(function() {
var suareside = 16;
var height = 40;
var width = 40;
$('.container').height(height * suareside);
$('.container').width(width * suareside);
for (var rows = 0; rows < width; rows++) {
$('<div class="gridSquare"></div>').appendTo('.container')
for (var cols = 0; cols < height; cols++) {
$('<div class="gridSquare"></div>').appendTo('.container')
}
}
//No need jquery
/*$('.container').on('hover', '.gridSquare', function() {
$(this).css('background-color', 'white');
});*/
});.container {
background-color: grey;
margin: 0 auto;
text-align: center;
font-size: 0;
margin-bottom: 30px;
}
.gridSquare {
width: 16px;
height: 16px;
background-color: black;
display: inline-block;
vertical-align: top;
}
/*change background on hover using css*/
.container .gridSquare:hover {
background: white;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container"></div>
</body>Made few changes to your js as below:
DEMO
$(document).ready(function(){
var suareside = 16;
var height = 40;
var width = 40;
$('.container').height(height*suareside);
$('.container').width(width*suareside);
for(var rows = 0; rows < width; rows++){
$('<div class="gridSquare"></div>').appendTo('.container')
for(var cols = 0; cols < height; cols++){
$('<div class="gridSquare"></div>').appendTo('.container')
}
}
$('.container').on('mouseover', '.gridSquare', function(){
$(this).css('background-color', 'white');
});
});
ids in DOM should be unique. So change it toclass- Use
mouseoverinstead!
You can use hover() for this.
$(document).ready(function(){
var suareside = 16;
var height = 40;
var width = 40;
$('.container').height(height*suareside);
$('.container').width(width*suareside);
for(var rows = 0; rows < width; rows++){
$('<div id="gridSquare"></div>').appendTo('.container')
for(var cols = 0; cols < height; cols++){
$('<div id="gridSquare"></div>').appendTo('.container')
}
}
$('.container').hover(function(){
$('#gridSquare').css("background-color","#FFFFFF");
});
});
As I can see in your fiddle,
You have created div(s) with the same "id" attribute :
$('<div id="gridSquare"></div>').appendTo('.container');
It will be better approach to use "class" instead of "id" :
$('<div class="gridSquare"></div>').appendTo('.container');
And to change the color of div(s) on mouseover:
If you are using gridSquare as "id":
$('.container').on('mouseover', '#gridSquare', function(){
$(this).css('background-color', 'white');
});
If you are using gridSquare as "class":
$('.container').on('mouseover', '.gridSquare', function(){
$(this).css('background-color', 'white');
});