Почему после события click() событие mouseover() срабатывает на секунду и сразу срабатывает mouseout()?

Question

[s_cruze44]

let blockOpacityNo = {"opacity":"0"};
	let blockOpacityYes = {"opacity":"1"};

$(function() {
					$('.squere').click(function() { 		/*Событие по клику*/							
								$('.btnOpac').css('display','none');
									$('.squere').css(blockOpacityNo);
									   $('.squere_up').mouseout(function() { 	/*Событие по отводу из блока мыши*/
													$('.squere').css(blockOpacityYes);
														$('.btnOpac').css('display','block');
												
									});	
								});													
							});

При нажатии на текст, блок с текстом должен пропасть, а когда мышь покидает область блока, должно все вернутся, и потом снова при нажатии должно все пропасть. Но когда нажимаю на текст, он на секунду пропадает и снова появляется.

Comments

[2bllk]

я осмелюсь попросить html-код

[s_cruze44]

2bllk,

<div class="squere_up">      
       <div class="squere">
         <p class="btnOpac">Click</p>
       </div>
     </div>
   </section>

[Ankhena]

2bllk, действительно, смело

[Ankhena]

s_cruze44, Почитайте и посмотрите пример со смайликами, что происходит и в какой момент, когда вы двигаете мышкой по блокам.
https://learn.javascript.ru/mousemove-mouseover-mo...

squere

может, всё таки square?

[s_cruze44]

Ankhena, square. Спасибо

Дело в том, что я понимаю как это происходит, но, когда я ставлю событие на блок, а не на текст, тогда все как надо работает, но мне нудно именно на текст, а тут происходит так что при нажатии онипроподает с блоком, но снова сразу появляется, а если я поставлю после нажатия mouseover на блок. .square_up, то все тоже работает, но когда я навожу на весь блок, то он пропадает хоть я ещё не нажал кнопку

[Ankhena]

s_cruze44, я с трудом понимаю, что вы называете "блоком", а что "текстом", разметка не очень соответствует вопросу. Я спать.
Нормальный пример в песочнице сделайте, вдруг кто-то не спит.