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

#javascript #html #jquery #css

Здравствуйте!

Подскажите, пожалуйста, как одновременно совместить 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;
}



  
    
    

       Белый
    
  

  
    
    

       Серый
    
  

  
    
    

       Желтый
    
  





    

Ответы

Ответ 1

В 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;
}




  
    
    

       Белый
    
  


  
    
    

       Серый
    
  


  
    
    

       Желтый
    
  




Ответ 2

Используйте fadeIn() и fadeOut(), также не забудьте останавливать анимацию при помощи
stop(). И еще надо будет подчистить стили: по умолчанию надо убрать у тултипа нулевую
непрозрачность и добавить display: none.

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



$(document).ready(function() {
  $(".radio-toolbar").on('mouseenter', '.color_label', function(event) {

    $(this).find('.tooltip').stop(true, true).fadeIn(100);

  }).on('mouseleave', '.color_label', function(event) {
    $(this).find('.tooltip').stop(true, true).fadeOut(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);
  position: absolute;
  background-color: #FFF;
  box-shadow: 0px 1px 4px 0px rgba(24, 80, 120, 0.6);
  display: none;
  z-index: 9999;
}

.tooltip:after {
  position: absolute;
  left: 0;
  top: 100%;
  content: '';
  display: block;
  width: 100%;
  height: 12px;
}
.tooltip_top {
  bottom: 100%;
  left: 0px;
}




  
    
    

       Белый
    
  


  
    
    

       Серый
    
  


  
    
    

       Желтый