Анимация display:none и opacity:0 для div блока

Здравствуйте!
Подскажите, пожалуйста, как одновременно совместить display:none и opacity
В данном случае, нужно, чтобы при наведении на присвоить

блоку(который находится внутри ) opacity:1 и display: block; Если курсор убрать с этого , то, соответственно, этому

блоку присвоить opacity:0 и display: none
Проблема заключается в том, что используя opacity, div блок становится невидимым, но на странице он есть. И при наведении курсора на это невидимое поле оно становится видимым:

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

блок он не становился видимым как на картинке.
Спасибо!
$(document).ready(function() { $(".radio-toolbar").on('mouseenter', '.color_label', function(event) { $(this).find('.tooltip').animate({ opacity: 1 }, 100); }).on('mouseleave', '.color_label', function(event) { $(this).find('.tooltip').animate({ opacity: 0 }, 100); }); }); .radio-toolbar { position: absolute; left: 200px; top: 130px; } .radio-toolbar input[type="radio"] { display: none; } .radio-toolbar label { font-family: Arial; font-size: 16px; border-radius: 50%; display: inline-block; vertical-align: top; width: 28px; height: 28px; border: 1px solid #939393; } .radio-toolbar input[type="radio"]:checked + label { background-color: #bbb; } .color_label { position: relative; display: inline-block; width: 20px; height: 20px; cursor: pointer; } .tooltip { margin: 0px 0px 13px 50%; padding: 5px; font-size: 14px; line-height: 16px; transform: translate(-50%, 0px); } .tooltip_top { bottom: 100%; left: 0px; } .tooltip { opacity: 0; position: absolute; background-color: #FFF; box-shadow: 0px 1px 4px 0px rgba(24, 80, 120, 0.6); z-index: 9999; }

Белый

Серый

Желтый

Ответ

В JQuery есть функция show/hide, которая прячет и открывает блок используя указанный стиль:
$(document).ready(function() { $(".radio-toolbar").on('mouseenter', '.color_label', function(event) { // Проверяем, не навёл ли пользователь на tooltip if(!$(event.target).hasClass('tooltip')){ // Функцией stop останавливаем все предыдущие анимации, показываем элемент и делаем его плавное появление $(this).find('.tooltip').stop().css('display', 'block').animate({opacity: 1}, 100) }; }).on('mouseleave', '.color_label', function(event) { // Функцией stop останавливаем все анимации и плавно делаем прозрачным блок $(this).find('.tooltip').stop().animate({opacity: 0}, 100); // Скрываем после всех анимаций $(this).find('.tooltip').queue(function() { $(this).css('display', 'none'); }); }); }); .radio-toolbar { position: absolute; left: 200px; top: 130px; } .radio-toolbar input[type="radio"] { display: none; } .radio-toolbar label { font-family: Arial; font-size: 16px; border-radius: 50%; display: inline-block; vertical-align: top; width: 28px; height: 28px; border: 1px solid #939393; } .radio-toolbar input[type="radio"]:checked + label { background-color: #bbb; } .color_label { position: relative; display: inline-block; width: 20px; height: 20px; cursor: pointer; } .tooltip { margin: 0px 0px 13px 50%; padding: 5px; font-size: 14px; line-height: 16px; transform: translate(-50%, 0px); } .tooltip_top { bottom: 100%; left: 0px; } .tooltip { display: none; /* Скрываем блок */ opacity: 0; /* И делаем его прозрачным */ position: absolute; background-color: #FFF; box-shadow: 0px 1px 4px 0px rgba(24, 80, 120, 0.6); pointer-events: none; /* Убрать полное взаимодействие мыши с tooltip */ z-index: 9999; }

Белый

Серый

Желтый