Как сделать такое переключение классов jquery?

Question

[Lvan226]

Привет.

Есть кнопка:

<button class="menu__search-btn">
<svg width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.913 14.835a6.915 6.915 0 006.912-6.918A6.915 6.915 0 007.913 1 6.915 6.915 0 001 7.917a6.915 6.915 0 006.913 6.918z" stroke="#000" stroke-miterlimit="10"/><path d="M20.536 20.549c-.601.601-1.403.601-2.004 0l-6.812-6.817c.6-.401 1.302-1.003 2.003-2.005l6.913 6.917c.5.501.5 1.404-.1 1.905z" stroke="#000" stroke-miterlimit="10"/></svg>
</button>
							<input type="text" placeholder="Search for...">
						</div>

$('.menu__search').on('click', function () {
		$(this).addClass('active');
	});

Мне нужно сделать переключение классов, чтобы класс убирался после того как я мышку уберу, но ещё надо чтобы он не убирался пока в инпуте что-то ввожу, или просто там курсор.

Подскажите, пожалуйста, как это сделать? Спасибо.

Comments

[Lvan226]

Там где поиск изначально только иконка, нужно выдвижение сделать. Сейчас оно есть, но необходимо убирать еще

Answer 1

[Тигран Абрамян]

Comments

[Lvan226]

Спасибо, благодоря вам я сделал так

$(".menu__search").hover(function() {
		$(".menu__search").addClass('active');
	},
	function() {
		if (!$(".input-search").val() && !$('.input-search').is(":focus")) {
			$(".menu__search").removeClass('active');
		}
	});
	$(".input-search").on("input", function() {
		$(".menu__search").addClass('active');
	});
	$('.input-search').focusout(function () {
		if ($(this).val() === '' ) {
			$(".menu__search").removeClass('active');
		}
	});

В моем случае это работает идеально