Доброго времени суток. Помогите понять почему пропадает выделение? Оно появляется после ухода курсора с элемента. А должно по нажатию на него. И если кликнуть в край блока с классом label_select_fild не срабатывает onclick, но mouseover срабатывает, почему?
<div class="popup_container">
<div class="popup">
<div class="popup__navigation">
<div class="popup_close">
X
</div>
</div>
<div class="popup__search">
<div class="popup__search__block">
<div class="popup__search_text">
<h2> Где искать?</h2>
</div>
<div class="popup__search_text">
<h2> Порядок вывода?</h2>
</div>
</div>
<div class="popup__search__block">
<div class="popup__search_select">
<div class="block_label">
<div id="bli_1" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">ID</span>
<input style="display:none;" type="radio" name="field" value="id">
</label>
</div>
<div id="bli_2" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">Дата</span>
<input style="display:none;" type="radio" name="field" value="date">
</label>
</div>
<div id="bli_3" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">Дилер</span>
<input style="display:none;" type="radio" name="field" value="dealer">
</label>
</div>
<div id="bli_4" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">Менеджер</span>
<input style="display:none;" type="radio" name="field" value="manager">
</label>
</div>
</div>
<div class="block_label">
<div id="bli_5" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">Юридическое лицо</span>
<input style="display:none;" type="radio" name="field" value="ur_name">
</label>
</div>
<div id="bli_6" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">ИНН ЮЛ</span>
<input style="display:none;" type="radio" name="field" value="ur_inn">
</label>
</div>
</div>
<div class="block_label">
<div id="bli_7" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">Адрес</span>
<input style="display:none;" type="radio" name="field" value="address" checked>
</label>
</div>
<div id="bli_8" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">История</span>
<input style="display:none;" type="radio" name="field" value="histoty">
</label>
</div>
<div id="bli_9" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">Оборудование</span>
<input style="display:none;" type="radio" name="field" value="tool">
</label>
</div>
</div>
</div>
<div class="popup__search_select">
<div class="block_label">
<div id="bli_10" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">Возрастание</span>
<input style="display:none;" type="radio" name="sort" value="ask">
</label>
</div>
<div id="bli_11" class="block_label__item">
<label class="label_select_fild">
<span class="label_select_fild__text">Убывание</span>
<input style="display:none;" type="radio" name="sort" value="desk" checked>
</label>
</div>
</div>
</div>
</div>
<div class="popup__search__block">
<div class="popup__search_text">
<h2> Какой статус?</h2>
</div>
</div>
<div class="popup__search__block">
<div class="popup__search_status">
<!--
В будущем с динамическую подгрузку статусов
-->
<select>
<option class="select_status" name"select_status" value="0" selected >Не учитывать</option>
<option class="select_status" name"select_status" value="1" >Не обработано</option>
<option class="select_status" name"select_status" value="2" >Авторизовано</option>
<option class="select_status" name"select_status" value="3" >Не авторизовано</option>
<option class="select_status" name"select_status" value="4" >Реализовано</option>
<option class="select_status" name"select_status" value="5" >Не реализовано</option>
<option class="select_status" name"select_status" value="6" >Авторизация прекращена</option>
<option class="select_status" name"select_status" value="7" >Авторизация продлена</option>
<option class="select_status" name"select_status" value="8" >Авторизация просрочена</option>
<option class="select_status" name"select_status" value="9" >Запрос актуальности</option>
</select>
</div>
</div>
</div>
<div class="popup__footer">
<div class="popup_submit">
Найти
</div>
</div>
</div>
</div>
// Подсветим checked
$('.block_label__item input:radio:checked').parent().parent().css({'background-color':'rgba(0, 128, 0, 0.3)', 'border-radius':'5px', 'color':'darkgreen'});
// выделяем при наведении
$('.block_label__item').on('mouseover', function() {
$(this).css({'background-color':'rgba(0, 128, 0, 0.3)', 'border-radius':'5px', 'color':'darkgreen'});
});
//снимаем выделение только у не выбранных
$('.block_label__item').on('mouseout', function() {
var elem = $(this).children().children();
if ($(elem[1]).attr('checked') != 'checked'){
$(this).css({'background-color':'white', 'color':'#ccc'});
}
});
$('body .block_label__item').on('click', function(event) {
event.preventDefault();
var elem = $(this).children().children();
var name = $(elem[1]).attr('name');
var mas_input = $('.block_label__item input[name="'+name+'"]');
for(i=0; i<mas_input.length;i++){
$(mas_input[i]).attr('checked', false);
}
$('.block_label__item input[name="'+name+'"]').parent().parent().css({'background-color':'white', 'color':'#ccc'});
$(elem[1]).attr('checked', true);
$(elem[1]).css({'background-color':'rgba(0, 128, 0, 0.3)', 'border-radius':'5px', 'color':'darkgreen'});
});
$('.main-title').on('click', function (){
$('main').addClass('custom_blur');
$('.popup_container').css({'display':'flex'});
$('.popup').fadeIn(800);
});
