滚动和鼠标悬停，mouseleave jquery [关闭]

Question

我已经被这个问题困了三天了...... 请帮助解决方案。

任务：

• 如果我们将页面滚动到类 Section-1 的块，那么 屏幕右侧会出现一个带有图标和文本的红色按钮。 一旦我们将页面滚动到类 Section-3 的块，然后 红色按钮（带有动画效果）转换为迷你按钮（带有图标，无文本）。

• 如果我们将页面滚动到类 Section-6 的块，那么 屏幕右侧会出现一个带有图标和文本的绿色按钮。 一旦我们将页面滚动到带有类 Section-8 的块，然后 绿色按钮（带有动画效果）转换为迷你按钮（带有图标，无文本）。

• 如果我们将页面滚动到具有 Footer 类的块，那么 我们将按钮移到原来的位置（在页脚中）。

• 如果按钮以迷你版本显示，那么当您将鼠标悬停在它上面时，我们会显示普通版本（带有图标和文本），并且 如果光标从按钮上移开，则删除普通版本。

jQuery(document).ready(function(){
    jQuery(window).scroll(function() {    
    var scroll = jQuery(window).scrollTop();
    var order_now = $(".order_now");
    var vacancies_now = $(".vacancies_now");
    var section_1 = ($('.t4-section-1').offset().top);
    var section_2 = ($('.t4-section-2').offset().top);
    var section_3 = ($('.t4-section-3').offset().top);
    var section_4 = ($('.t4-section-4').offset().top);
    var section_5 = ($('.t4-section-5').offset().top);
    var section_6 = ($('.t4-section-6').offset().top);
    var section_7 = ($('.t4-section-7').offset().top);
    var section_8 = ($('.t4-section-8').offset().top);
    var section_9 = ($('.t4-section-9').offset().top);
    var footer = ($('.t4-footer').offset().top);
    
    var scrollPos = $(document).scrollTop();
    
    if (scrollPos >= section_1 && scrollPos < section_3) {
        order_now.addClass("btn-right");
    }
      else if (scrollPos >= section_3 && scrollPos < footer) {
        order_now.removeClass("btn-right");
        order_now.addClass("compact animated rubberBand");
    }
      else if (scrollPos < section_3) {
        order_now.removeClass("compact");
    }
      else if (scrollPos >= footer) {
        order_now.removeClass("btn-right compact");
        vacancies_now.removeClass("btn-right compact");
    }
      else if (scrollPos < section_1) {
        order_now.removeClass("btn-right compact");
        vacancies_now.removeClass("btn-right compact");
    }

    if (scrollPos >= section_6 && scrollPos < section_8) {
        vacancies_now.addClass("btn-right");
    }
      else if (scrollPos >= section_8 && scrollPos < footer) {
        vacancies_now.removeClass("btn-right");
        vacancies_now.addClass("compact animated rubberBand");
    }
      else if (scrollPos < section_8) {
        vacancies_now.removeClass("compact");
    }

    jQuery(document).ready(function(){
    var order_now = $(".order_now");
    var vacancies_now = $(".vacancies_now");

        order_now.mouseover(function(){
        order_now.removeClass("compact")
        order_now.addClass("btn-right")
    });
        order_now.mouseleave(function(){
        order_now.removeClass("btn-right")
        order_now.addClass("compact")
    });

        vacancies_now.mouseover(function(){
        vacancies_now.removeClass("compact")
        vacancies_now.addClass("btn-right")
    });
        vacancies_now.mouseleave(function(){
        vacancies_now.removeClass("btn-right")
        vacancies_now.addClass("compact")
    });
});
});
});

/****default buttons****/

.order_now_btn {
height: 63px;
position: relative;
}

.vacancies_now_btn {
height: 63px;
position: relative;
}

.order_now > a {
font-weight: 600;
padding: 14px 28px;
display: inline-block;
min-width: 180px;
text-align: center;
font-size: 15px;
border-radius: 6px;
box-shadow: 0 0 20px 5px #ccc;
transition: 0.5s;
left: 50%;
position: absolute;
transform: translateX(-50%);
}

.vacancies_now > a {
font-weight: 600;
padding: 14px 28px;
display: inline-block;
min-width: 180px;
text-align: center;
font-size: 15px;
border-radius: 6px;
box-shadow: 0 0 20px 5px #ccc;
transition: 0.5s;
left: 50%;
position: absolute;
transform: translateX(-50%);
}

.order_now {
text-align: center;
transition: 0.5s;
}

.vacancies_now {
text-align: center;
transition: 0.5s;
}

.order_now > a:hover {
background: #DC3545;
}

.vacancies_now > a:hover {
background: #28A745;
}

.order_now > a:before {
content: 'Заказать';
}

.vacancies_now > a:before {
content: 'В Команду';
}

.order_now > a:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
background: #DC3545;
transform: rotate(45deg);
bottom: -6px;
left: 0;
right: 0;
margin: auto;
}

.vacancies_now > a:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
background: #28A745;
transform: rotate(45deg);
bottom: -6px;
left: 0;
right: 0;
margin: auto;
}

.order_now.btn-right > a {
left: calc(100% - 116px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
}

.vacancies_now.btn-right > a {
left: calc(100% - 116px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
}

.order_now.btn-right {
position: fixed;
width: 100%;
left: 0;
top: 190px;
transition: 0.5s;
z-index: 999999 !important;
}

.vacancies_now.btn-right {
position: fixed;
width: 100%;
left: 0;
top: 380px;
transition: 0.5s;
z-index: 999999 !important;
}

@media(max-width:479px) {
.order_now.btn-right > a {
left: calc(100% - 67px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
min-width: 100px;
font-size: 12px;
padding: 5px 10px;
}
.order_now > a i {
margin-right: 3px;
}
}

@media(max-width:479px) {
.vacancies_now.btn-right > a {
left: calc(100% - 67px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
min-width: 100px;
font-size: 12px;
padding: 5px 10px;
}
.vacancies_now > a i {
margin-right: 3px;
}
}

/****compact buttons****/

.order_now.compact > a:before {
content: '';
}

.vacancies_now.compact > a:before {
content: '';
}

.order_now.compact > a:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
background: #DC3545;
transform: rotate(45deg);
bottom: -6px;
left: 0;
right: 0;
margin: auto;
}

.vacancies_now.compact > a:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
background: #28A745;
transform: rotate(45deg);
bottom: -6px;
left: 0;
right: 0;
margin: auto;
}

.order_now.compact > a {
left: calc(100% - 116px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
}

.vacancies_now.compact > a {
left: calc(100% - 116px);
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
}

.order_now.compact {
position: fixed;
width: 100%;
left: 0;
top: 190px;
transition: 0.5s;
z-index: 999999 !important;
}

.vacancies_now.compact {
position: fixed;
width: 100%;
left: 0;
top: 380px;
transition: 0.5s;
z-index: 999999 !important;
}

@media(max-width:479px) {
.order_now.compact > a {
left: 92%;
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
min-width: 50px;
font-size: 12px;
padding: 5px 10px;
}
.order_now > a i {
margin-right: 3px;
}
}

@media(max-width:479px) {
.vacancies_now.compact > a {
left: 92%;
transform: rotate(90deg);
border-top-right-radius: 0;
border-top-left-radius: 0;
min-width: 50px;
font-size: 12px;
padding: 5px 10px;
}
.vacancies_now > a i {
margin-right: 3px;
}
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- Bootstrap CSS (Cloudflare CDN) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
  <!-- jQuery (Cloudflare CDN) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.1/jquery-migrate.min.js"></script>
  <!-- Bootstrap Bundle JS (Cloudflare CDN) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
  <!-- Font Awesome 5 -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
  <!-- Animate.css -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css">
</head>
<body>

<div class="container">
<div class="row">
<div class="col">
<div class="t4-hero">
<h3>Hero</h3>
<h5>Not show any Buttons</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-section-1">
<h3>Section 1</h3>
<h5>(Start «order_now» Button)</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-section-2">
<h3>Section 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-section-3">
<h3>Section 3</h3>
<h5>(Start «order_now.compact» Button)</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-section-4">
<h3>Section 4</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-section-5">
<h3>Section 5</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-section-6">
<h3>Section 6</h3>
<h5>(Start «vacancies_now» Button)</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-section-7">
<h3>Section 7</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-section-8">
<h3>Section 8</h3>
<h5>(Start «vacancies_now.compact» Button)</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-section-9">
<h3>Section 9</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="t4-footer">
<h3>Footer</h3>

<!--Start Code «order_now» Button-->
<div class="order_now_btn">
<div class="custom">
<div class="order_now">
<a href="hidden/feedback?tmpl=component" class="html5lightbox btn btn-danger" data-group="order_now">
<i class="fas fa-shopping-bag"></i> 
</a>
</div>
</div>
</div>
<!--End Code «order_now» Button-->

<!--Start Code «vacancies_now» Button-->
<div class="vacancies_now_btn">
<div class="custom">
<div class="vacancies_now">
<a href="hidden/feedback?tmpl=component" class="html5lightbox btn btn-success" data-group="vacancies_now">
<i class="fas fa-user-graduate"></i> 
</a>
</div>
</div>
</div>
<!--End Code «vacancies_now» Button-->

</div>

<div class="t4-footnav">
<h3>Footnav</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

</div>
</div>
</div>

</body>
</html>

错误：

• 当您将鼠标悬停在普通版按钮上时（如果它甚至没有时间转换为迷你版），然后将光标移开，然后 它采用迷你版的形式。 如果在释放按钮的那一刻，光标不小心悬停在该按钮上，则也会发生此操作，然后 它采用迷你版的形式。

• 到达相应区块后向上滚动页面时无法实现反向效果

• 不能为超过 479px 的屏幕宽度制作迷你按钮，即 在 479px 的屏幕上一切都很好（我唯一想修复的是删除按钮之间的缩进）； 在小于 479px 的屏幕上，按钮会随着屏幕缩小而离开屏幕（但这仍然可以容忍）； 在超过 479px 的屏幕上，迷你版的按钮与普通版的按钮大小相同，但没有文字（不幸的是）。

• 如果我们将页面滚动到开头（带有 Hero 类的块），那么按钮不会消失。