Как добавить класс при наведении, и удалить этот класс если он есть у блока?

Question

[Александр Наумов]

Есть блок с кружками

<div class="faith__circle_box">
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>

							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>

							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>

							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle blue-no"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle blue-no"></div>
							</div>

							<div class="col__circle">
								<div class="faith-circle blue-no"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle blue"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>

							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>

							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>

							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>

							<div class="col__circle">
								<div class="faith-circle blue"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>

							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
							<div class="col__circle">
								<div class="faith-circle"></div>
							</div>
						</div>

Нужно чтобы при наведении на черный круг, он становился синим, а при повторном наведении кружок сменялся вновь на черный и у этого была постоянная зацикленность.

Answer 1

[Stockholm Syndrome]

$('.faith-circle').on('mouseenter', function() {
  $(this).toggleClass('blue');
});

Comments

[MonadTeq]

Судя по вопросу, необходимо уточнить, что была использована библиотека jQuery.

[Stockholm Syndrome]

MonadTeq, в тегах указана же