Jquery Hover function not changing class

Question

I've created a grid of pixels and want it to change to black when hovered. The problem is that the event is not working.

$(document).ready(function() {

  function makeGrid(k) {
    var size = 320 / k;
    for (var i = 0; i < k; i++) {
      $(".container").append("<div class=row></div>");
    }
    for (var j = 0; j < k; j++) {
      $(".row").append("<div class=square></div>");
    }
    $('.square').css({
      'height': size,
      'width': size
    });
  }


  $('.square').hover(function() {
    $(this).addClass(".hover");
  })

  $('.reset').on('click', function() {
    $(".container").empty();
    makeGrid(16);

  })

  $('.start').on('click', function() {
    var n = prompt("Set the size");
    $(".container").empty();
    makeGrid(n);
  })
})

.square {
  border-collapse: collapse;
  display: inline-block;
}

.container {
  text-align: -webkit-center;
  position: relative;
  top: 50px;
  margin: 0 auto;
  border: 1px solid #000000;
  width: 320px;
  height: 320px;
  border-collapse: collapse;
}

.row {
  clear: both;
  content: "";
  height: 20px;
}

.hover {
  background-color: black;
}

button {
  text-align: center;
  background-color: white;
  display: inline-block;
  font-size: 20px;
  border-radius: 2px;
  top: 50%;
}

.wrap {
  text-align: -webkit-center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrap">
  <button class="clear">New Grid</button>
  <button class="start">Start</button>
  <button class="reset">Reset</button>
</div>
<div class="container"></div>

j08691 · Accepted Answer · 2017-03-21 16:42:00Z

Since you dynamically add your divs, you can't use .hover() and have to use .on() with mouseenter instead. Also when using .addClass() you just use the class' name with no period being prefixed.

$(document).ready(function() {
  function makeGrid(k) {
    var size = 320 / k;
    for (var i = 0; i < k; i++) {
      $(".container").append("<div class=row></div>");
    }
    for (var j = 0; j < k; j++) {
      $(".row").append("<div class=square></div>");
    }
    $('.square').css({
      'height': size,
      'width': size
    });
  }
  $(document).on("mouseenter", ".square", function(e) {
    $(this).addClass("hover");
  });
  $('.reset').on('click', function() {
    $(".container").empty();
    makeGrid(16);
  })
  $('.start').on('click', function() {
    var n = prompt("Set the size");
    $(".container").empty();
    makeGrid(n);
  })
})

.square {
  border-collapse: collapse;
  display: inline-block;
}

.container {
  text-align: -webkit-center;
  position: relative;
  top: 50px;
  margin: 0 auto;
  border: 1px solid #000000;
  width: 320px;
  height: 320px;
  border-collapse: collapse;
}

.row {
  clear: both;
  content: "";
  height: 20px;
}

.hover {
  background-color: black;
}

button {
  text-align: center;
  background-color: white;
  display: inline-block;
  font-size: 20px;
  border-radius: 2px;
  top: 50%;
}

.wrap {
  text-align: -webkit-center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrap">
  <button class="clear">New Grid</button>
  <button class="start">Start</button>
  <button class="reset">Reset</button>
</div>
<div class="container"></div>

Collectives™ on Stack Overflow

Jquery Hover function not changing class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related