1

Complete noob question here:

I have this 16x16 grid of divs generated by jQuery

var rows = 16;
var columns = 16;
var $row = $("<div />", {
  class: 'row'
});
var $square = $("<div />", {
  class: 'square'
});

$(document).ready(function() {
  for (var i = 0; i < columns; i++) {
    $row.append($square.clone());
  }

  for (var x = 0; x < rows; x++) {
    $(".box_main").append($row.clone());
  }
});
.row {
  width: auto;
  height: 40px;
  background: #313131;
}
.square {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin: 0;
  display: inline-block;
  background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Can I somehow use the addClass and removeClass (or anything else) in order to change the background-color of each div one by one upon hovering/mouseenter over them?

I tried work something out but I'm not even sure whether it's possible or not to do this.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
mbt86
  • 37
  • 5
  • 1
    Yes you can use css classes to change the styling of your `div`s. You might want to try it for yourself first before asking. ;) – evolutionxbox Nov 09 '16 at 10:01
  • 2
    This is easy with jQuery, but easier with CSS. Make a new style with selector ```.square:hover``` and set the background color there. – Ben Guest Nov 09 '16 at 10:02
  • I tried but I'm not even sure which element to select? Everytime I did something the grid just disappeared. – mbt86 Nov 09 '16 at 10:03

2 Answers2

4

addClass()/removeClass() (or even JS) is not needed for this - you can achieve it using the :hover pseduo selector of CSS alone. Try this:

.square:hover {
  background: #C00; /* amend colour as needed */
}

Working example:

var rows = 16;
var columns = 16;
var $row = $("<div />", {
  class: 'row'
}).appendTo('body');
var $square = $("<div />", {
  class: 'square'
});

$(document).ready(function() {
  for (var i = 0; i < columns; i++) {
    $row.append($square.clone());
  }

  for (var x = 0; x < rows; x++) {
    $(".box_main").append($row.clone());
  }
});
body {
  background: #313131;
}
.row {
  width: auto;
  height: 40px;
  background: #313131;
}
.square {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin: 0;
  display: inline-block;
  background: #fff;
}
.square:hover {
  background: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • Thansk for that I'm not sure if :hover can be used if I wanted different colors for example for different buttons? – mbt86 Nov 09 '16 at 10:15
  • It can be made to work, but I'd need more details about the logic which governs which colours should be used on which elements. I'd suggest you start a new question with those details. – Rory McCrossan Nov 09 '16 at 10:16
1

beside the :hover pseduo selector, you might need to add an actual class to it with JS (perhaps it would make more sense if triggered by other event), nevertheless, here is an example using JS (addClass/removeClass)

var rows = 16;
var columns = 16;
var $row = $("<div />", {
  class: 'row'
});
var $square = $("<div />", {
  class: 'square'
});
$row.appendTo('body');

$(document).ready(function() {
  for (var i = 0; i < columns; i++) {
    $row.append($square.clone());
  }

  for (var x = 0; x < rows; x++) {
    $(".box_main").append($row.clone());
  }

  $('.square').hover(function() { $(this).addClass('hovering'); }, function() { $(this).removeClass('hovering'); });
});
.row {
  width: auto;
  height: 40px;
  background-color: #313131;
}
.square {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin: 0;
  display: inline-block;
  background-color: #fff;
}
.hovering {
  background-color: cyan;
  border: 3px dashed blue;
  width: 34px;
  height: 34px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
arhak
  • 2,488
  • 1
  • 24
  • 38
  • The hovering works but what if I want it to work something like a "drawing"? I think I asked the wrong question *facepalm – mbt86 Nov 09 '16 at 11:05