4

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

Подскажите, пожалуйста, как одновременно совместить display:none и opacity.

В данном случае, нужно, чтобы при наведении на <label> присвоить <div> блоку(который находится внутри <label>) opacity:1 и display: block; Если курсор убрать с этого <label>, то, соответственно, этому <div> блоку присвоить opacity:0 и display: none.

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

введите сюда описание изображения

Подскажите, пожалуйста, как сделать, чтобы текстовая подсказка появлялась при наведении исключительно на выбранный на круг, чтобы при наведении на невидимый <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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="radio-toolbar">

  <label for="radio1" class="color_label" style="background-color: #FAFBFB">
    <input type="radio" id="radio1" name="radios" value="all">
    <div class="tooltip tooltip_top">
      <i class="tooltip-arrow"></i> Белый
    </div>
  </label>

  <label for="radio2" class="color_label" style="background-color: #C1C1C1">
    <input type="radio" id="radio2" name="radios" value="false">
    <div class="tooltip tooltip_top js-tooltip">
      <i class="tooltip-arrow"></i> Серый
    </div>
  </label>

  <label for="radio3" class="color_label" style="background-color: #FDE910">
    <input type="radio" id="radio3" name="radios" value="true">
    <div class="tooltip tooltip_top js-tooltip">
      <i class="tooltip-arrow"></i> Желтый
    </div>
  </label>

</div>

2 ответа 2

4

В 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="radio-toolbar">


  <label for="radio1" class="color_label" style="background-color: #FAFBFB">
    <input type="radio" id="radio1" name="radios" value="all">
    <div class="tooltip tooltip_top">
      <i class="tooltip-arrow"></i> Белый
    </div>
  </label>


  <label for="radio2" class="color_label" style="background-color: #C1C1C1">
    <input type="radio" id="radio2" name="radios" value="false">
    <div class="tooltip tooltip_top js-tooltip">
      <i class="tooltip-arrow"></i> Серый
    </div>
  </label>


  <label for="radio3" class="color_label" style="background-color: #FDE910">
    <input type="radio" id="radio3" name="radios" value="true">
    <div class="tooltip tooltip_top js-tooltip">
      <i class="tooltip-arrow"></i> Желтый
    </div>
  </label>

</div>

18
  • А если бы анимация была бы чуть посложнее, но включала бы появление и скрытие? Имхо это не решение проблемы....... Кстати баг: если навестись на кружок а потом быстро поставить курсор на подсказку, то она исчезнет и сразу появится.. 3 фев 2017 в 8:22
  • @АлексейШиманский, так лучше?
    – Yuri
    3 фев 2017 в 8:35
  • так возникает иногда другой баг: если навестись на кружок, а потом на подсказку (или в сторону), а потом обратно на кружок, то подсказка не появится xD 3 фев 2017 в 8:38
  • @АлексейШиманский, всё, и это пофиксил )
    – Yuri
    3 фев 2017 в 8:42
  • Умничка. А теперь было бы неплохо описать подробно про эти баги и что сделалось, чтоб их не было)) 3 фев 2017 в 8:45
3

Используйте 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="radio-toolbar">


  <label for="radio1" class="color_label" style="background-color: #FAFBFB">
    <input type="radio" id="radio1" name="radios" value="all">
    <div class="tooltip tooltip_top">
      <i class="tooltip-arrow"></i> Белый
    </div>
  </label>


  <label for="radio2" class="color_label" style="background-color: #C1C1C1">
    <input type="radio" id="radio2" name="radios" value="false">
    <div class="tooltip tooltip_top js-tooltip">
      <i class="tooltip-arrow"></i> Серый
    </div>
  </label>


  <label for="radio3" class="color_label" style="background-color: #FDE910">
    <input type="radio" id="radio3" name="radios" value="true">
    <div class="tooltip tooltip_top js-tooltip">
      <i class="tooltip-arrow"></i> Желтый
    </div>
  </label>

</div>

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.