Как сделать, чтобы блок реагировал на mouseleave после клика?

Question

[Im p3l]

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="block">
    <div>
      <p class="text">
        some text for block 1
      </p>
    </div>
    <div>
      <img src="https://picsum.photos/id/400/200/150" alt="">
    </div>
  </div>
  <div>
    <p class="under-box-text">
      Under box <a class="link">click here</a>
    </p>
    <p class="invisible">
      Done!
    </p>
  </div>
</div>
<div class="wrapper">
  <div class="block">
    <div>
      <p class="text">
        some text for block 2
      </p>
    </div>
    <div>
      <img src="https://picsum.photos/id/360/200/150" alt="">
    </div>
  </div>
  <div>
    <p class="under-box-text">
      Under box <a class="link">click here</a>
    </p>
    <p class="invisible">
      Done!
    </p>
  </div>
</div>

.block {
  background: #444;
  width: 150px;
  height: 200px;
  display: inline-block;
  text-align: center;
  border: 1px solid aqua;
  cursor: pointer;
}

.active.block {
  border: 1px solid red;
}

.active.block:hover {
  border: 1px solid #e62e7a;
}

.active .text {
  color: red;
}

.active.block:hover .text {
  color: #e62e7a;
}

.active + div .under-box-text {
  display: none;
}

.active + div .invisible {
  display: block;
}

.block:hover {
  border: 1px solid blue;
}

img {
  width: 150px;
}

.text {
  color: white;
}

.link {
  text-decoration: underline;
  cursor: pointer;
}

.invisible {
  display: none;
}

$(document).ready(function () {
	let $block = $(".block");

	$block.click(function() {
		this.boolean = true;
	});

	$block.mouseleave(function () {
		let $this = $(this);
		if ( $this.prop("boolean") ) {
			$this.toggleClass("active");
		}
	});

	$(".link").click(function() {
		let $wrap = $(this).closest(".wrapper");
		$wrap.find(".block").toggleClass("active")
	});

	$block.click(function () {
		$(this).prop("boolean", false);
		$(this).toggleClass("active");
	});

});

Answer 1

[Илья Солдатенков]

В переменную условное состояние "кликнутости" в булевом виде запишите, и в хендлере на mouseleave проверяйте эту переменную, соответственно изменение переменной происходит по клику.

Comments

[Im p3l]

а можете в js написать, а то я сегодня весь день сижу, мозг плавится уже

[Илья Солдатенков]

Lo Ran, https://jsfiddle.net/35ghy0tp/

Answer 2

[Kerm]

https://jsfiddle.net/gkqynj29/ так?

Comments

[Im p3l]

Kerm hover на не активном и активном блоке так не будут работать, и еще одним нажатием по блоку, он должен снова стать не активным

[Kerm]

Lo Ran, ты что просил то и получил, у тебя в вопросе нет не каких ховеров и нет не чего про повторное нажатие по блоку, формируй вопрос тогда иначе. И не понятно что значит активный/не активный, когда в вопросе было только про цвет бордера.