如何在HTML / CSS中同时在标签和文本框上应用缩放转换？

Question

我在HTML中尝试过表单，我希望同时在标签和文本框上悬停缩放过渡，就像我将光标放在标签上然后标签和文本框都缩放一样。我尝试了很多代码和YouTube。我可以单独悬停，但我不知道如何同时缩放。任何人都有任何编码的想法。

这是html代码：以上是css代码plz检查两个代码，因为我想同时悬停，如果我在标签上激活光标，那么标签和文本区域都将被缩放 我尝试了很多选择，但我没有得到答案。如果有人帮我，因为我的大学任务，我很困难，请我快速回答

＆＃13;

＆＃13;

label {
  transform: 56px;
  font-width: 180px;
  display: inline-block;
  text-align: right;
  text-align: top;
}
label:hover {
  font-size: 40px;
}
input:hover {
  font-size: 40px;
}
#preview {
  margin-top: 8.5px;
  margin-left: 5px;
  width: 20%;
}
fieldset {
  background-color: lightyellow;
  border: 10px solid yellow;
  margin-bottom: 10px;
  width: 600px height: 900px;
}

＆＃13;

<form>
  <h1>PLEASE ENTER YOUR DETAIL FOR OUR DATING SITE</h1>
  <fieldset>
    <legend>YOUR FACE</legend>
    <label>YOUR IMAGE</label>
    <input type="file" id="avatar" name="avatar" required>
    <br>
    <label>image preview:</label>
    <img id="preview">
  </fieldset>
  <fieldset>
    <legend>YOUR GENERAL DETAIL</legend>
    <label>NAME</label>
    <input type="text" name="name">
    <br>
    <br>
    <label>Gender</label>
    : Male
    <input type="radio" width="180px">Female
    <input type="radio">
    <br>
    <br>
    <label>Age:</label>
    <input type="number" width="180px">
    <br>
    <br>
    <label>Date of birth:</label>
    <input type="date" width="180px">
    <br>
    <br>
    <label>Favourite color:</label>
    <input type="color" width="180px">
    <br>
    <br>
    <label>Which country:</label>
    <select required width="180px">
      <br>
      <option value="">None</option>
      <option>America</option>
      <option>Pakistan</option>
      <option>Egypt</option>
      <option>Turkey</option>
      <option>China</option>
      <option>Japan</option>
      <br>
    </select>
  </fieldset>
  <fieldset>
    <legend>Your indicators</legend>
    <br>
    <label>Height:</label>
    Short
    <input type="range" min="0" max="100" ;>Tall
    <br>
    <br>
    <label>Salary:Poor</label>
    <input type="range" min="0" max="100">Rich
    <br>
  </fieldset>
  <fieldset>
    <legend>Your Contact Information</legend>
    <label>Email:</label>
    <input type="email" style="width:180;">
    <br>
    <br>
    <label>Mobile:</label>
    <input type="tel " width="180px ">
    <br>
    <br>
    <label>Address:</label>
    <textarea></textarea>
    <br>
    <br>
    <label>Method to contact you:</label>
    <input type="checkbox " ; width="auto ">
    <label>Email</label>
    <input type="checkbox ">
    <label>Whatsapp</label>
    <input type="checkbox ">
    <label>In-appchat</label>
    <input type="checkbox ">
  </fieldset>
  <input type="submit " value="Submit ">



  <script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js "></script>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用 Adjacent sibling combinator 选择悬停input旁边的label。

＆＃13;

＆＃13;

label {
  transform: 56px;
  font-width: 180px;
  display: inline-block;
  text-align: right;
  text-align: top;
}
label:hover, label:hover + input, label:hover + select, label:hover + textarea {
  font-size: 40px;
}
#preview {
  margin-top: 8.5px;
  margin-left: 5px;
  width: 20%;
}
fieldset {
  background-color: lightyellow;
  border: 10px solid yellow;
  margin-bottom: 10px;
  width: 600px height: 900px;
}

＆＃13;

<form>
  <h1>PLEASE ENTER YOUR DETAIL FOR OUR DATING SITE</h1>
  <fieldset>
    <legend>YOUR FACE</legend>
    <label>YOUR IMAGE</label>
    <input type="file" id="avatar" name="avatar" required>
    <br>
    <label>image preview:</label>
    <img id="preview">
  </fieldset>
  <fieldset>
    <legend>YOUR GENERAL DETAIL</legend>
    <label>NAME</label>
    <input type="text" name="name">
    <br>
    <br>
    <label>Gender</label>
    : Male
    <input type="radio" width="180px">Female
    <input type="radio">
    <br>
    <br>
    <label>Age:</label>
    <input type="number" width="180px">
    <br>
    <br>
    <label>Date of birth:</label>
    <input type="date" width="180px">
    <br>
    <br>
    <label>Favourite color:</label>
    <input type="color" width="180px">
    <br>
    <br>
    <label>Which country:</label>
    <select required width="180px">
      <br>
      <option value="">None</option>
      <option>America</option>
      <option>Pakistan</option>
      <option>Egypt</option>
      <option>Turkey</option>
      <option>China</option>
      <option>Japan</option>
      <br>
    </select>
  </fieldset>
  <fieldset>
    <legend>Your indicators</legend>
    <br>
    <label>Height:</label>
    Short
    <input type="range" min="0" max="100" ;>Tall
    <br>
    <br>
    <label>Salary:Poor</label>
    <input type="range" min="0" max="100">Rich
    <br>
  </fieldset>
  <fieldset>
    <legend>Your Contact Information</legend>
    <label>Email:</label>
    <input type="email" style="width:180;">
    <br>
    <br>
    <label>Mobile:</label>
    <input type="tel " width="180px ">
    <br>
    <br>
    <label>Address:</label>
    <textarea></textarea>
    <br>
    <br>
    <label>Method to contact you:</label>
    <input type="checkbox " ; width="auto ">
    <label>Email</label>
    <input type="checkbox ">
    <label>Whatsapp</label>
    <input type="checkbox ">
    <label>In-appchat</label>
    <input type="checkbox ">
  </fieldset>
  <input type="submit " value="Submit ">



  <script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js "></script>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将<label>包裹在<input>周围。

<label>TEXT
  <input>
</label>

段

label {
  transform: 56px;
  width: 180px;
  display: inline-block;
  text-align: right;
  text-align: top;
}
label:hover, label:focus {
  font-size: 40px;
}

input:hover, label:focus {
  font-size: 40px;
}
#preview {
  margin-top: 8.5px;
  margin-left: 5px;
  width: 20%;
}
fieldset {
  background-color: lightyellow;
  border: 10px solid yellow;
  margin-bottom: 10px;
  width: 600px height: 900px;
}

<form>
  <h1>PLEASE ENTER YOUR DETAIL FOR OUR DATING SITE</h1>
  <fieldset>
    <legend>YOUR FACE</legend>
    <label>YOUR IMAGE
      <input type="file" id="avatar" name="avatar" required>
    </label>
    <br>
    <label>image preview:</label>
    <img id="preview">
  </fieldset>

  <fieldset>
    <legend>YOUR GENERAL DETAIL</legend>
    <label>NAME
      <input type="text" name="name">
    </label>
    <br>
    <br>
    <label>Gender : Male
      <input type="radio">
    </label>
    <label>
      Female
      <input type="radio">
    </label>
    <br>
    <br>
    <label>Age:
      <input type="number" width="180px">
    </label>
    <br>
    <br>
    <label>Date of birth:
      <input type="date" width="180px">
    </label>
    <br>
    <br>
    <label>Favourite color:
      <input type="color" width="180px">
    </label>
    <br>
    <br>
    <label>Which country:
    <select required width="180px">
      <br>
      <option value="">None</option>
      <option>America</option>
      <option>Pakistan</option>
      <option>Egypt</option>
      <option>Turkey</option>
      <option>China</option>
      <option>Japan</option>
      <br>
    </select>
      </label>
  </fieldset>
  <fieldset>
    <legend>Your indicators</legend>
    <br>
    <label>Height:
    Short
    <input type="range" min="0" max="100" ;>Tall</label>
    <br>
    <br>
    <label>Salary:Poor
    <input type="range" min="0" max="100">Rich</label>
    <br>
  </fieldset>
  <fieldset>
    <legend>Your Contact Information</legend>
    <label>Email:
      <input type="email" style="width:180;">
    </label>
    <br>

    <br>
    <label>Mobile:
      <input type="tel " width="180px ">
    </label>
    <br>
    <br>
    <label>Address:</label>
    <textarea></textarea>
    <br>
    <br>
    <label>Method to contact you:
      <input type="checkbox " width="auto">
    </label>
    <label>Email
      <input type="checkbox ">
    </label>

    <label>Whatsapp
      <input type="checkbox ">
    </label>
    <label>In-appchat
      <input type="checkbox ">
    </label>
  </fieldset>
  <input type="submit " value="Submit ">



  <script src="https://www.cse.ust.hk/~rossiter/dating_web_site.js "></script>
</form>