Why `cursor: pointer` and `:hover` property is not being applied?

HTML and CSS Code:

*{
    margin: 0;
    padding: 0;
    font-family: "Spectral", "serif";
}

.main_box{
    /* width: 100vh; */
    background-image: url(photo.jpg);
    background-size: cover;
    height: 100vh;
}

.btn_one i{
    position: absolute;
    z-index: 1;
    color: white;
    font-size: 25px;
    font-weight: 900;
    left: 16px;
    line-height: 60px;
    cursor: pointer;
}

.btn_one i:hover {
    font-size: 30px;
}

.sidebar_menu{
    position: fixed;
    /* left: -300px; */
    height: 100vh;
    width: 300px;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.sidebar_menu .logo{
    position: absolute;
    line-height: 60px;
    width: 100%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);

    a{
        position: absolute;
        color: white;
        left: 50px;
        text-decoration: none;
        font-size: 20px;
        font-weight: 500;
    }
}

.sidebar_menu .btn_two i{
    position: absolute;
    color: grey;
    font-size: 20px;
    font-weight: 900;
    line-height: 60px;
    right: 20px;
    /* opacity: 0; */
    cursor: pointer;
}

.sidebar_menu .btn_two i:hover{
    font-size: 30px;
}

.sidebar_menu .menu{
    position: absolute;
    width: 100%;
    top: 80px;

    li{
        margin-top: 6px;
        padding: 10px 20px;

        i, a{
            color: white;
            text-decoration: none;
            font-size: 20px;
        }

        i{
            padding-right: 8px;
        }
    }

    li:hover{
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    }

    /* li a span::first_letter{
        color: red;
    } */
}

.sidebar_menu .social_media{
    position: absolute;
    left: 4em;
    bottom: 50px;
    font-size: 20px;
    i{
        opacity: 0.5;
        color: white;
        padding: 0 5px;
    }
}

#check{
    display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Project</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="main_box">
      <input type="checkbox" id="check" />
      <div class="btn_one">
        <label for="check">
          <i class="fa-solid fa-bars"></i>
        </label>
      </div>

      <div class="sidebar_menu">
        <div class="logo">
          <a href="#">Apna College</a>
        </div>

        <div class="btn_two">
          <label for="check">
            <i class="fa-solid fa-xmark"></i>
          </label>
        </div>

        <div class="menu">
          <ul>
            <li>
              <i class="fa-solid fa-image"></i>
              <a href="#"><span>Gallery</span></a>
            </li>
            <li>
              <i class="fa-solid fa-arrow-up-right-from-square"></i>
              <a href="#">Shortcuts</a>
            </li>
            <li>
              <i class="fa-solid fa-photo-film"></i>
              <a href="#">Exhibits</a>
            </li>
            <li>
              <i class="fa-solid fa-calendar-days"></i>
              <a href="#">Events</a>
            </li>
            <li>
              <i class="fa-solid fa-store"></i>
              <a href="#">Store</a>
            </li>
            <li>
              <i class="fa-solid fa-phone"></i>
              <a href="#">Contact</a>
            </li>
            <li>
              <i class="fa-regular fa-comments"></i>
              <a href="#">Feedback</a>
            </li>
          </ul>
        </div>

        <div class="social_media">
          <ul>
            <a href="#"><i class="fa-brands fa-facebook"></i></a>
            <a href="#"><i class="fa-brands fa-twitter"></i></a>
            <a href="#"><i class="fa-brands fa-instagram"></i></a>
            <a href="#"><i class="fa-brands fa-youtube"></i></a>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

I am trying to set the cursor property to cursor: pointer and increase the font-size using :hover on the .btn_one and .btn_two. The properties are being applied on the .btn_two but not on .btn_one.

I have searched on multiple platforms on how to solve this, but couldn't find a relevant solution.

Can someone please explain the reason behind this?

Solution

You are only targetting .btn_two for the hover effect .sidebar_menu .btn_two i:hover{ font-size: 30px; }

You need to target the two classes.

 .btn_one i{
   position: absolute;
   z-index: 1;
   color: white;
   font-size: 25px;
   font-weight: 900;
   left: 16px;
   line-height: 60px;
   cursor: pointer;
 }

.btn_one i:hover, .btn_two i:hover{
   font-size: 30px;
  }