首页 > 编程入门 文章详情

如何在HTML / CSS中同时在标签和文本框上应用缩放转换？(How to apply zoom transition on label and textbox simultaneously in

编程入门 行业动态 更新时间:2024-10-28 10:27:22
如何在HTML / CSS中同时在标签和文本框上应用缩放转换？(How to apply zoom transition on label and textbox simultaneously in HTML/CSS?)

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

这是html代码：以上是css代码plz检查两个代码，因为我想同时悬停，如果我活动光标在标签上然后标签和文本区域将被缩放我尝试了很多选项但我没有得到答案。如果有人帮助我因为它是我的大学作业，而且我坚持不懈，请让我快速回答 

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;
} 
  
<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> 
  
 

I tried form in HTML and I want to hover zoom transition on label and text box at same time, like if I put a cursor on label then label and text box both zoomed. I tried many codes and YouTube. I can hover both separately but I don't know how to zoom at same time.can anyone have any coding idea.
 

this is html code : and above is css code plz check both codes because i want to hover simultaneously if i active cursor on label then both label and text area will be zoomed i tried many option but i failed to get answer .if anyone helps me because its my college assignment and i am stuck with it badly please i want it fast answer
 

 
 
  
  
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;
} 
  
<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> 
  
 


                
最满意答案

                
                    
                        
 使用Adjacent兄弟组合器选择悬停label旁边的input 。 
 

 
 
  
  
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;
} 
  
<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> 
  
 

Use the Adjacent sibling combinator to choose the input next to the hovered label.
 

 
 
  
  
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;
} 
  
<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>

更多推荐

本文发布于:2023-07-26 16:41:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1278161.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：缩放   文本框   标签   如何在   CSS

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表