jquery - 当用户单击单选按钮时，隐藏所有其他选项并使标签放大和动画？

Question

我正在尝试创建一个基于表情符号的评级系统，

首先，我想知道如何让标签/表情符号图标在悬停时放大一点，使其变得比其他图标更大？

其次，当您单击其中一个单选按钮时，我可以隐藏所有未单击的单选按钮，然后为单击的标签设置动画以保持放大状态？

 <div class ="rating text-center  left-20" style="display: flex;">
               <div class="checkboxgroup">
                <input id="box1-fac-radio" type="radio" name="rad" value="1" style="visibility:hidden">
                <label for="box1-fac-radio"><i class ="twf twf-pensive twf-4x"></i></label>
                        </div>
                         <div class="checkboxgroup">
             <input id="box1-fac-radio1" type="radio" name="rad" value="2" style="visibility:hidden">
             <label for="box1-fac-radio1"><i class ="twf twf-neutral-face twf-4x"></i></label>
                      </div>
                       <div class="checkboxgroup">
             <input id="box1-fac-radio2" type="radio" name="rad" value="3" style="visibility:hidden">
             <label for="box1-fac-radio2"><i class ="twf twf-satisfied twf-4x"></i></label>
                 </div>
                  <div class="checkboxgroup">
                <input id="box1-fac-radio3" type="radio" name="rad" value="4" style="visibility:hidden">
               <label for="box1-fac-radio3"><i class ="twf twf-grin twf-4x"></i></label>
                  </div>
                   <div class="checkboxgroup">

             <input id="box1-fac-radio4" type="radio" name="rad" value="5" style="visibility:hidden">
            <label for="box1-fac-radio4"><i class ="twf twf-heart-eyes twf-4x"></i></label>

          </div>

谢谢

标签： jquery