我在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>
更多推荐
发布评论