Search code examples
htmlcssinputhoverlabel

Change font-size of label and input element's while hovering - HTML using CSS

HTML:
<fieldset>
  <legend> XXX </legend>
  <label for="photo"> Photo </label>
  <input type="file" name="photo" id="photo">
  <br>
  <label for="imagePreview"> Preview: </label>
  <img id="preview">
</fieldset>

CSS:
// 1. In this order, only input:hover works.
  label:hover { font-size: 25px;}
  input:hover { font-size: 20px;}

// 2. In this order, only label:hover works.
  input:hover { font-size: 20px;}
  label:hover { font-size: 25px;}

I was asked to do both should resize their font-size.

eg: Hovering on label, should change its font-size. Hovering on input, should change its font-size as well.

Why not both changing the font-size? How can I achieve it?

Solution 

  • fieldset { font-size: 20px;}
label:hover , input:hover { font-size: 25px;}
    <fieldset>
  <legend> XXX </legend>
  <label for="photo"> Photo </label>
  <input type="file" name="photo" id="photo">
  <br>
  <label for="imagePreview"> Preview: </label>
  <img id="preview">
</fieldset>