Animation display: none and opacity: 0 for a div block

Question

Hello!

Tell me, please, how to simultaneously combine display:none and opacity .

In this case, you need to assign a <div> block (which is inside the <label> ) when you hover over a <label> opacity:1 and display: block ; If the cursor is removed from this <label> , then, accordingly, this <div> block is assigned to opacity:0 and display: none .

The problem is that using opacity , the div block becomes invisible, but on the page it is. And when you hover over this invisible field, it becomes visible:

Tell me, please, how to make the text hint appear when you hover exclusively on the selected circle, so that when you hover over an invisible <div> block, it does not become visible as in the picture.

Thank!

 $(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>

Accepted Answer · 2017-02-03T08:20:01

In JQuery, there is a show/hide function that hides and opens a block using the specified style:

 $(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>

And if the animation would be a little more complicated, but would include the appearance and hiding?
IMHO this is not a solution to the problem ....... By the way a bug: if you go to the circle and then quickly put the cursor on the hint, it will disappear and immediately appear ..
sometimes there is another bug: if you go to the circle, and then to the hint (or to the side), and then back to the circle, the hint will not appear xD
And now it would be nice to describe in detail about these bugs and what happened so that they were not))

Answer 2 · 2017-02-03T08:42:25

Use fadeIn() and fadeOut() , also remember to stop the animation with stop() . And it will also be necessary to clean up the styles: by default it is necessary to remove zero opacity from the tooltip and add display: none .

UPD: to avoid blinking when hovering over the tooltip, a pseudo-element with a height equal to the gap between the circle and the tooltip is added to it.

 $(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>

you also have a bug as I described in the comments here - Alexey Shimansky

Animation display: none and opacity: 0 for a div block

2 answers 2

More articles: