悬停时更改标签和输入元素的字体大小 - 使用 CSS 的 HTML答案

【问题标题】：Change font-size of label and input element's while hovering - HTML using CSS悬停时更改标签和输入元素的字体大小 - 使用 CSS 的 HTML
【发布时间】：2023-04-05 11:57:01
【问题描述】：

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

我被要求同时调整它们的字体大小。

例如：悬停在标签上，应该改变它的字体大小。悬停在输入上，也应该改变它的字体大小。

为什么不同时改变字体大小？我怎样才能实现它？

【问题讨论】：

你真正需要什么？
所有输入元素和标签都应该在悬停时改变其大小。

标签： html css input hover label

【解决方案1】：

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>

【讨论】：

【解决方案2】：

你的意思是这样的

fieldset { font-size: 20px;}
fieldset:hover label,fieldset:hover input { 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>

【讨论】：

不是字段集悬停，所有和的。
对不起！你到底是什么意思？
嘿。不需要抱歉。我发现你的两个答案对我都有用。无论如何，感谢您所付出的努力。