@LoranDeMarcus

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

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

<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");
	});

});
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
@wrqqq
frontend developer
В переменную условное состояние "кликнутости" в булевом виде запишите, и в хендлере на mouseleave проверяйте эту переменную, соответственно изменение переменной происходит по клику.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы