Adjust the font size of labels and input elements when hovering in HTML with CSS

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

CSS:
// Attempt 1: Only input:hover changes font-size.
  label:hover { font-size: 25px;}
  input:hover { font-size: 20px;}

// Attempt 2: Only label:hover changes font-size.
  input:hover { font-size: 20px;}
  label:hover { font-size: 25px;}

I was tasked with making both elements change their font size when hovered over.

For example, hovering on the label should increase its font size, and hovering on the input should do the same.

Why aren't both elements changing font sizes? How can I achieve this?

htmlcssinputhoverlabel

Answer №1

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

Answer №2

Do you mean something along these lines?

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a detached element under certain conditions

When attempting to add a detached span based on a specific condition, I encountered the following situation. const arrow = d3 .create('span') .classed('arrow', true) .text('\u2192'); //d3.select('bod ...

javascripthtmld3.js

Is there a way to invert the order of elements in a scrollable container in Google Chrome?

The code snippet provided creates the desired effect, but unfortunately, it only seems to function properly in Firefox and Edge. In Chrome, while the elements are stacked correctly, there is no horizontal scroll bar, making the rightmost items hidden and i ...

cssflexbox

Is there a reason why JSP does not support the 'put' method in forms? Are there any workarounds to enable the use of the put method in JSP forms?

I am currently facing an issue with implementing the PUT method in a JSP form. It seems that it is not supported, and I'm trying to understand the reasoning behind this. Interestingly, when I use HTML instead of JSP and call a servlet that accepts PUT ...

javahtmljspservlets

Progress bar for uploading files

Similar Question: Upload Progress Bar in PHP Looking for suggestions on a simple and effective method to implement a file upload progress bar. Interested in a solution that involves both javascript and php. Any recommendations? ...

phpjavascripthtmlcss

Ways to incorporate encoded HTML text into string literals

When attempting to insert a HTML encoded special character within a string literal, I am encountering an issue where it does not display as intended in the final document. The approach I am taking is as follows: const head = { title: `${ApplicationName} ...

javascripthtmlencoding

An effective method to showcase the HTML content retrieved by getElementsByClassName using JSON.parse()

Can someone help me modify this code so that it displays the value of favFood? It currently works with getElementById but not getElementsByClassName, and I want to use a class: server file - ProcesssingFileOnServer.php: <?php $myObj = new stdClass(); ...

javascriptphphtmljson

Pure CSS text slideshow

I'm currently working on developing a text content slideshow using only CSS. Here is the HTML/CSS code I have: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS text slideshow examp ...

htmlcssanimationslideshowcss-animations

Horizontal order with Flexbox

I'm currently utilizing flexbox to arrange elements in a row <div class="artist-wrapper"> <div class="artist"></div> <div class="artist"></div> <div class="artist"></div> </div> .artist-wra ...

htmlcssflexbox

I am facing difficulty importing emotion js style using dynamic variables

I recently designed a webpage that has the following appearance: https://i.stack.imgur.com/AnIXl.jpg Here is the code from my _app.tsx file: import '../styles/globals.css' import type { AppProps } from 'next/app' import { createTheme ...

javascriptcssreactjsnext.jsemotion

Guide to placing a wrapable label in a box layout using Kivy

I'm struggling with the concept of a markup TextField in kivymd/kivy. Since there is no markup available in any textfield/textinput, I started thinking about creating a textfield similar to that on Stack Overflow. The idea is to have a textfield with ...

pythonkivylabeltextinput

Contrasting WebSQL and SQLite in terms of their utility in mobile applications and web browsers

Could you confirm if WebSQL and SQLite are the same? Are both WebSQL and SQLite available in PhoneGap? Will the JavaScript code used for WebSQL in a web browser be the same for a mobile app, or will we need different code? What advantages does WebSQL ha ...

javascriptangularjshtmlsqliteweb-sql

Is it just me or does my wrapper always hover above the bottom of the screen?

I have been working on coding a simple layout that I created last year. Most of the work is done, but I ran into an issue where the 'wrapper' div doesn't extend to the bottom of the page as expected. It almost looks like it has the "position ...

css

Bootstrap's versatile footer positioning adaptation

I am working with a simple layout design: +----------+ | Header | +----------+ | | | Content | | | +----------+ | Footer | +----------+ My goal is to ensure that the footer is positioned: at the bottom of the viewport when there ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Ways to determine whether an element is presently engaged in scrolling

Is there a way to determine if certain actions can be disabled while an element is being scrolled? The scrolling may be triggered by using the mouse wheel or mouse pad, or by calling scrollIntoView(). Can we detect if an element is currently being scroll ...

javascripthtmlreactjstypescript

Stop draggable element from exiting the boundaries of its container during drag operation

I have a draggable element with id mydiv that is contained within another element with id container. I want to restrict the movement of mydiv so that it stays inside the container without leaving its boundaries. How can I achieve this? Below is the code s ...

javascripthtmlcssdraggable

Is there a way to position the drop-down menu in front of the slider?

Hey there, I'm currently experiencing some issues with the drop-down menu on my index page. The drop-down items are hidden below my image slider, which is directly underneath my navigation bar. I would really appreciate any help in fixing this so that ...

htmlcssslidernavbar

AngularJS: splitting the parent <div> into multiple sections every nth element

I have an array of strings in Javascript and I am attempting to use AngularJS to create nested <div> elements. var arr = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"]; My goal is to group every 3 elements together like so. <div class="pare ...

javascripthtmlangularjs

Issue with surrounding design elements near main focal point

On my website, I am struggling to position two images at the top of the page on either side of the content. The current temporary solution can be accessed [removed]. If you have a wide enough resolution, you may notice that both red Christmas decorations ...

cssbackgroundscrollbar

Combining Material UI's Higher Order Components (HOCs) for Maximum Efficiency

Currently in the process of combining multiple Material UI components for rendering. The code I have so far is: export default connect(mapStateToProps, mapDispatchToProps)(withTheme()(withStyles(styles)(ShopStore))); This setup is functioning as expected. ...

javascriptcssreactjsreduxmaterial-ui

The progress indicator fails to activate during the first step

As a beginner in coding, I wanted to incorporate a progress bar on my website. However, I encountered an issue where when I try to make step 1 "active", it's actually step 2 that becomes active, and the same pattern continues for subsequent steps. ...

htmlcsswebprogress-bar