Подскажите, пожалуйста, почему не хочет работать первая кнопка (все остальные работают). Не применяется курсор и анимация (ни в хроме, ни в опере)

Question

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.containerWrap1 {
  display: flex;
  flex-direction: column;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 44px;
  justify-content: center;
  align-items: center;
  margin-bottom: 140px;
}

.headerWrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1200px;
  margin-bottom: 26.85px;
}

.logo {
  display: flex;
}

.search_and_menu {
  display: flex;
}

.search_and_menu img {
  padding-left: 30px;
}

.logo h2 {
  color: #244D4D;
  font-family: Montserrat;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.navWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.navWrap a {
  color: #161616;
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
}

.mainWrap {
  display: flex;
  flex-direction: row;
  margin-bottom: 140px;
}

.mainWrap img {
  width: 411px;
  height: 560px;
  flex-shrink: 0;
}

.text {
  width: 789px;
  height: 560px;
  flex-shrink: 0;
  background: #154444;
  border: none;
}

.headder h1 {
  color: #FFF;
  font-family: Montserrat;
  font-size: 56px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 101px 18px 20px 100px;
  width: 671px;
}

.min_text p {
  color: #FFF;
  font-family: DM Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
  flex-shrink: 0;
  padding: 0 201px 35px 100px;
}

#explore {
  margin-left: 100px;
  color: #154444;
  font-family: DM Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
  width: 172.576px;
  height: 56px;
  flex-shrink: 0;
  background: #FFF;
  border: none;
  cursor: pointer;
}

.text_footer {
  color: #244D4D;
  font-family: DM Sans;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
  margin-bottom: 40px;
}

.wrap_icons {
  display: flex;
  flex-direction: row;
  height: 51.972px;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.container2Wrap {
  display: flex;
  height: 612px;
  padding: 1.028px 0px 0.972px 0px;
  justify-content: center;
  align-items: center;
  gap: 99.258px;
  margin-left: 150px;
  margin-right: 150px;
  margin-bottom: 140px;
}

.wrap_inf_p2 {
  width: 436px;
  height: 517px;
}

.header_and_information h2 {
  color: #244D4D;
  font-family: Montserrat;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 20px;
}

.header_and_information p {
  color: #444;
  font-family: DM Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
  width: 436.728px;
  height: 75px;
  flex-shrink: 0;
  margin-bottom: 40px;
}

.icon_header2_inf img {
  float: left;
  margin-right: 28px;
  margin-bottom: 20px;
}

.wrap_inf_p2 h4 {
  color: #244D4D;
  font-family: Montserrat;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  margin-bottom: 14px;
}

.similar p {
  color: #383738;
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 30px;
}

.icon3_header3_inf3 img {
  float: left;
  margin-right: 28px;
  margin-bottom: 20px;
}

.icon4_header4_inf4 img {
  float: left;
  margin-right: 28px;
  margin-bottom: 20px;
}

.container3Wrap {
  display: flex;
  flex-direction: column;
  margin-left: 150px;
  margin-right: 150px;
  margin-bottom: 140px;
  justify-content: center;
  align-items: center;
}

.text_up {
  display: flex;
  flex-direction: row;
  margin-bottom: 80px;
  justify-content: space-between;
}

.up h2 {
  color: #242424;
  font-family: Montserrat;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 52px;
  margin-bottom: 20px;
}

.text_up p {
  color: #383738;
  font-family: DM Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
  width: 819.702px;
  height: 50.562px;
  flex-shrink: 0;
  margin-right: 250px;
}

.lines {
  display: flex;
  flex-direction: row;
}

.line2 {
  background-color: #F4F6F6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  margin-left: 16px;
  position: relative;
}

.line2 i {
  position: relative;
  top: 12px;
  right: -13px;
  cursor: pointer;
}

.line1 {
  background-color: #F4F6F6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  position: relative;
}

.line1 i {
  position: relative;
  top: 12px;
  right: -13px;
  cursor: pointer;
}

.underWrap {
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.first_block {
  background-color: #FFF;
  width: 380px;
  height: 382.314px;
  flex-shrink: 0;
  box-shadow: 0px 13px 26px 0px rgba(0, 0, 0, 0.07);
}

.img1Wrap {
  margin-bottom: 30px;
}

.textWrap1 p {
  color: #242424;
  font-family: DM Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px;
  margin-bottom: 21px;
  margin-left: 24px;
}

.one_line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.heart_and_share {
  display: flex;
  gap: 8px;
}

.heart1 {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background-color: #EF5423;
  border-radius: 50%;
  position: relative;
}

.heart1 i {
  position: relative;
  top: 5px;
  right: -5px;
  cursor: pointer;
}

.share {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background-color: #ECF4FF;
  border-radius: 50%;
  position: relative;
  margin-right: 24px;
}

.share i {
  position: relative;
  top: 5px;
  right: -5px;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  cursor: pointer;
}

.price p {
  color: #154444;
  font-family: DM Sans;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 31px;
  margin-left: 24px;
}

.price_and_btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn_sale button {
  width: 78.854px;
  height: 32px;
  flex-shrink: 0;
  background-color: #244D4D;
  color: #FFF;
  font-family: DM Sans;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
  border: none;
  margin-right: 24px;
  cursor: pointer;
}

.second_block {
  background-color: #FFF;
  width: 380px;
  height: 382.314px;
  flex-shrink: 0;
  box-shadow: 0px 13px 26px 0px rgba(0, 0, 0, 0.07);
}

.img2Wrap {
  margin-bottom: 30px;
}

.second_line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.heart_and_share {
  display: flex;
  gap: 8px;
}

.heart {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background-color: #ECF4FF;
  border-radius: 50%;
  position: relative;
}

.heart i {
  position: relative;
  top: 5px;
  right: -5px;
  cursor: pointer;
}

.share i {
  position: relative;
  top: 5px;
  right: -5px;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  cursor: pointer;
}

.price_and_btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.third_block {
  background-color: #FFF;
  width: 380px;
  height: 382.314px;
  flex-shrink: 0;
  box-shadow: 0px 13px 26px 0px rgba(0, 0, 0, 0.07);
}

.img3Wrap {
  margin-bottom: 30px;
}

.second_line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.heart_and_share {
  display: flex;
  gap: 8px;
}

.heart {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background-color: #ECF4FF;
  border-radius: 50%;
  position: relative;
}

.heart i {
  position: relative;
  top: 5px;
  right: -5px;
  cursor: pointer;
}

.share i {
  position: relative;
  top: 5px;
  right: -5px;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  cursor: pointer;
}

.price_and_btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container4 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.container4Wrap {
  width: 1200px;
  height: 394.32px;
  flex-shrink: 0;
  background-color: #F4F6F6;
  margin-left: 160px;
  margin-right: 160px;
  margin-bottom: 140px;
  position: absolute;
  top: 2750px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.header2_4 h2 {
  color: #222;
  text-align: center;
  font-family: Montserrat;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 48px;
  padding-top: 68px;
  padding-bottom: 20px;
}

.minor_text4 h4 {
  color: #222;
  text-align: center;
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  padding-bottom: 40px;
}

.email {
  width: 400px;
  height: 67px;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}

.blank {
  display: inline-block;
  position: relative;
}

.blank input {
  padding: 25px 70px 25px 17px;
  margin-left: 400px;
}

.blank .btn_in_form {
  position: absolute;
  right: 13px;
  top: 7px;
  margin: 0;
  width: 125px;
  height: 52px;
  flex-shrink: 0;
  background-color: #305F64;
  color: #FFF;
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  border: none;
  cursor: pointer;
}

.container_footer {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.container_footerWrap {
  width: 1519px;
  height: 378px;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  background-color: #305F64;
  overflow-x: hidden;
  position: absolute;
  top: 3290px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.h4_and_mintext h4 {
  color: #FFF;
  font-family: Montserrat;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 101px 318px 24px 120px;
}

.h4_and_mintext p {
  color: #FFF;
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  padding-left: 120px;
  padding-right: 157px;
}

.col2Wrap {
  display: flex;
  flex-direction: column;
}

.container_footerWrap h6 {
  color: #FFF;
  font-family: Montserrat;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  padding-top: 103px;
  padding-bottom: 24px;
}

.nav01 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nav01 a {
  text-decoration: none;
  color: #FFF;
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.col2Wrap h6 {
  padding-right: 100px;
}

.col3 h6 {
  padding-right: 108px;
}

.col4 p {
  color: #FFF;
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px;
  padding-bottom: 35px;
}

form input {
  width: 240px;
  height: 48px;
  flex-shrink: 0;
  background-color: #FFF;
  border: none;
  padding: 14px 126px 13px 22px;
}

.em_and_btn {
  position: relative;
}

.btn_end {
  position: absolute;
  right: 10px;
  top: 10px;
  background-color: #FFB624;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

#explore {
  transition: 2s !important;
}

#explore:hover {
  background-color: rgb(196, 46, 46) !important;
}

.buy {
  transition: 4s;
}

.buy:hover {
  background-color: green;
}

.btn_in_form {
  transition: 4s;
}

.btn_in_form:hover {
  background-color: deeppink;
}

.btn_end {
  transition: 4s;
}

.btn_end:hover {
  background-color: turquoise;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dz11</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="mainContainer">
    <div class="container">
      <div class="containerWrap1">
        <div class="header">
          <div class="headerWrap">
            <div class="logo">
              <h2>DudeShape</h2>
            </div>
            <div class="nav">
              <div class="navWrap">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Features</a>
                <a href="#">Contact</a>
              </div>
            </div>
            <div class="search_and_menu">
              <img src="./loupe 1.svg" alt="loupe">
              <img src="./menu 1.svg" alt="menu">
            </div>
          </div>
        </div>
        <div class="main">
          <div class="mainWrap">
            <img src="./Rectangle 91.png" alt="sofa">
            <div class="text">
              <div class="headder">
                <h1>We Help You Make Modern Furniture</h1>
              </div>
              <div class="min_text">
                <p class="under-h">All of our furniture uses the best materials and <br/> choices for our customers.All of our furniture uses <br/> the best materials</p>
              </div>
              <div class="btn_exp">
                <button type="submit" id="explore">Explore More</button>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="wrap_text_footer">
            <p class="text_footer">Trusted by 20,000+ companies</p>
          </div>
          <div class="wrap_icons">
            <div class="wrap_img1">
              <img src="./XMLID_328_.svg" alt="mastercard"></div>
            <div class="wrap_img2">
              <img src="./Airbnb_logo 2.svg" alt="airbnb"> </div>
            <div class="wrap_img3">
              <img src="./Uber_logo_2018 1.svg" alt="uber"></div>
            <div class="wrap_img4">
              <img src="./Frame 14.svg" alt="paypal"></div>
            <div class="wrap_img5">
              <img src="./visa 1.svg" alt="visa"></div>
            <div class="wrap_img6">
              <img src="./stripe-4 1.svg" alt="stripe"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="container2">
      <div class="container2Wrap">
        <div class="imgWrap_p2">
          <img src="./Rectangle 94.png" alt="">
        </div>
        <div class="wrap_inf_p2">
          <div class="header_and_information">
            <h2>About Us</h2>
            <p>All of our furniture uses the best materials and choices for our customers.All of our furniture <br/> uses the best materials</p>
          </div>
          <div class="similar">
            <div class="icon_header2_inf">
              <img src="./shield 3.svg" alt="">
              <h4>Best Quality</h4>
              <p>All of our furniture uses the best <br/> materials and choices</p>
            </div>
            <div class="icon3_header3_inf3">
              <img src="./guarantee 1.svg" alt="">
              <h4>100% Secure</h4>
              <p>All of our furniture uses the best <br/> materials and choices</p>
            </div>
            <div class="icon4_header4_inf4">
              <img src="./free-delivery 1.svg" alt="">
              <h4>Free Shopping</h4>
              <p>All of our furniture uses the best <br/> materials and choices</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container3">
      <div class="container3Wrap">
        <div class="up">
          <h2>Our Popular Furniture</h2>
          <div class="text_up">
            <p>All of our furniture uses the best materials and choices for our customers.All of our <br/> furniture uses the best materials and choices for our customers.</p>
            <div class="lines">
              <div class="line1">
                <i class="fa-solid fa-chevron-left" style="color: #D1CECE;"></i>
              </div>
              <div class="line2">
                <i class="fa-solid fa-chevron-right" style="color: #666666;"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="under">
          <div class="underWrap">
            <div class="first_block">
              <div class="img1Wrap">
                <img src="./Rectangle 34.png" alt="">
              </div>
              <div class="textWrap1">
                <div class="one_line">
                  <p><strong>White Swan Chair</strong></p>
                  <div class="heart_and_share">
                    <div class="heart1">
                      <i class="fa-regular fa-heart" style="color: #ebe6e6;"></i>
                    </div>
                    <div class="share">
                      <i class="fa-solid fa-share-nodes" style="color: #000000;"></i>
                    </div>
                  </div>
                </div>
                <div class="price_and_btn">
                  <div class="price">
                    <p><strong>$40</strong></p>
                  </div>
                  <div class="btn_sale">
                    <button type="submit" class="buy">Buy Now</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="second_block">
              <div class="img2Wrap">
                <img src="./Rectangle 38.png" alt="">
              </div>
              <div class="textWrap1">
                <div class="second_line">
                  <p><strong>White Swan Chair</strong></p>
                  <div class="heart_and_share">
                    <div class="heart">
                      <i class="fa-regular fa-heart" style="color: black"></i>
                    </div>
                    <div class="share">
                      <i class="fa-solid fa-share-nodes" style="color: #000000;"></i>
                    </div>
                  </div>
                </div>
                <div class="price_and_btn">
                  <div class="price">
                    <p><strong>$40</strong></p>
                  </div>
                  <div class="btn_sale">
                    <button type="submit" class="buy">Buy Now</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="third_block">
              <div class="img3Wrap">
                <img src="./Rectangle 36.png" alt="">
              </div>
              <div class="textWrap1">
                <div class="second_line">
                  <p><strong>White Swan Chair</strong></p>
                  <div class="heart_and_share">
                    <div class="heart">
                      <i class="fa-regular fa-heart" style="color: black"></i>
                    </div>
                    <div class="share">
                      <i class="fa-solid fa-share-nodes" style="color: #000000;"></i>
                    </div>
                  </div>
                </div>
                <div class="price_and_btn">
                  <div class="price">
                    <p><strong>$40</strong></p>
                  </div>
                  <div class="btn_sale">
                    <button type="submit" class="buy">Buy Now</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container4">
      <div class="container4Wrap">
        <div class="header2_4">
          <h2>Subscribe to get the latest news <br/> about us</h2>
        </div>
        <div class="minor_text4">
          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br/> eiusmod tempor incididunt ut labore at dolore.</h4>
        </div>
        <div class="blank">
          <form action="#" method="post">
            <input type="email" class="email" name="email" placeholder="&#9993;  Enter your email">
            <button type="submit" class="btn_in_form">Register</button>
          </form>
        </div>
      </div>
    </div>
    <div class="container_footer">
      <div class="container_footerWrap">
        <div class="h4_and_mintext">
          <h4>DudeShape</h4>
          <p>Lorem ipsum dolor sit amet, conse <br/> ctetur adipiscing elit, sed eiusmod <br/> tempor incididunt ut labore .</p>
        </div>
        <div class="col2">
          <div class="col2Wrap">
            <h6>Take a tour</h6>
            <div class="nav01">
              <div class="num1">
                <a href="#">Features</a> </div>
              <div class="num2">
                <a href="#">Pricing</a></div>
              <div class="num3">
                <a href="#">Product</a></div>
              <div class="num4">
                <a href="#">Support</a></div>
            </div>
          </div>
        </div>
        <div class="col3">
          <h6>Our company</h6>
          <div class="nav01">
            <a href="#">About Us</a>
            <a href="#">Blog</a>
            <a href="#">Media</a>
            <a href="#">Contact Us</a>
          </div>
        </div>
        <div class="last_wrap">
          <div class="col4">
            <h6>Subscribe</h6>
            <p>Subscribe to get the latest <br/> news from us</p>
          </div>
          <div class="em_and_btn">
            <form action="#" method="post">
              <input type="email" name="emails" placeholder="Email Address">
              <button type="submit" class="btn_end"><i class="fa-solid fa-arrow-right" style="color: #ffffff;"></i></button>
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <script src="https://kit.fontawesome.com/5c8ac366de.js" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

К кнопке "Explore more" не применяются стили при наведении, потому что у вас секция "container4" и "container_footer" перекрывают всю видимую ширину и высоту экрана. Не правильное позиционирование этих элементов, а именно заданные стили "width: 100%; height: 100%; position: absolute;" - задайте их вложенным в "container4" и "container_footer" элементам и поведение страницы изменится.

БЛОГ НА HUSL

Подскажите, пожалуйста, почему не хочет работать первая кнопка (все остальные работают). Не применяется курсор и анимация (ни в хроме, ни в опере)

Ответы (1 шт):