Incorporate a dynamic CSS hover effect on the label located beneath the checkbox to modify the

Any tips for adding a CSS hover effect to labels below the input field? I'm looking for a solution that doesn't rely on specific div IDs.

You can view a live demo on JSFiddle here.

The goal is to expand or shrink the corresponding div when the checkbox is checked, and also have a hover effect to indicate that the label is clickable.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>checkbox expand div</title>
    <meta charset="UTF-8" />
    <style>
      .case {
        position: relative;
        margin-bottom: 1em;
      }
      .case label {
        display: inline-block;
        background-color: coral;
        box-sizing: border-box;
        width: 100%;
      }
      .case input {
        text-align: center;
        height: 55px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
      }
      .project-input {
        width: 100%;
        height: 20px;
        display: block;
      }
      .projectcontent {
        max-height: 50px;
        transition: max-height 0.15s ease-out;
        overflow: hidden;
        background-color: #888;
      }
      .case .project-input:checked + .projectcontent {
        max-height: 2000px;
        overflow: visible;
        transition: max-height 0.3s ease-out;
      }
    </style>
  </head>

  <body>
    <main>
      <h1>Expand divs</h1>
      <div class="case">
        <label for="project-input">
          <h2>Click here to expand/shrink this div</h2></label
        >

        <input type="checkbox" class="project-input" title="Expand / Shrink" />

        <div class="projectcontent">
          <p>Lorem ipsum<br />dolor sit amet.</p>
          <p>consectetur<br />adipiscing elit.</p>
          <p>sed do eiusmod<br />tempor incididunt.</p>
          <p>ut labore et<br />dolore magna aliqua.</p>
        </div>
      </div>
      <div class="case">
        <label for="project-input">
          <h2>Click here to expand/shrink this div</h2></label
        >

        <input type="checkbox" class="project-input" title="Expand / Shrink" />

        <div class="projectcontent">
          <p>Lorem ipsum<br />dolor sit amet.</p>
          <p>consectetur<br />adipiscing elit.</p>
          <p>sed do eiusmod<br />tempor incididunt.</p>
          <p>ut labore et<br />dolore magna aliqua.</p>
        </div>
      </div>
    </main>
  </body>
</html>

Answer №1

TL;DR - To create a hover effect for a label, add the `.case label:hover` role. Hide the input element completely (using `clip`, for example) and ensure the label's `for` attribute matches the input's `id` attribute.

Explanation:

  • You can use `:hover` on the label to trigger the hover effect. The issue arises when the input is displayed on top of the label, preventing the label from registering the hover state properly.

  • The solution is to hide the input entirely. However, a new issue emerges as clicking on the label now has no effect.

  • To resolve this, ensure that the label's `for` attribute corresponds with the input's `id` attribute. This will enable clicking on the labels to toggle the input's checked state.

Link to code example

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

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

The initial menu option stands out due to its unique appearance, created using the :first-child

I am currently designing a website menu and I would like the .current-menu-item - current item, to have a different appearance. However, I want the first item in this menu to have rounded corners (top left, bottom left). How can I achieve this using the :f ...

Tips for navigating an aframe scene on mobile devices

How can I enable scrolling over aframe on mobile devices? I attempted to disable the scene controls but scrolling still doesn't work; the scene keeps interacting instead. ...

CSS- The ultimate guide to perfectly centering a webpage without the need for extra margins!

Our SharePoint 2013 generated web page has a width of 1024. The main content div is styled as follows: #container_master { width:1024px !important; margin-left: auto !important; margin-right: auto !important; background-color:#FFF !impor ...

What is the method for utilizing script bundles in pure HTML (not cshtml)?

After reviewing the following two questions on Stack Overflow, I made sure not to ask a duplicate question: 1) @Render.Scripts in plain .html file - not in .cshtml 2) Rendering the script bundle in a plain HTML page I am curious about how to incorporate ...

Styling for 'checked' state within an ngFor iteration

Each checkbox in my list is assigned to a different department, with each department having its own color. When a box is unchecked, only the border is in the color of the department. When checked, the background changes to the assigned color https://i.ssta ...

VueJS is known to cause divs to reach towering heights on buildings

After running npm run build on my VueJS project, the columns in my grid inexplicably stretch to an enormous height. I've spent about 3 hours trying to find the cause, tweaking settings and combing through my CSS files with no luck. It seems like this ...

Combining Angular Material with another CSS framework

I'm diving into my first Angular project and contemplating incorporating Angular Material. It offers an abundance of components, which aligns with my project needs. However, I've noticed a lack of grid system and utility classes within Angular Ma ...

Attempting to align two parent divs within a container div to appear side by side, while ensuring that one of the parent divs repeats multiple rows without impacting the second parent

I am in the process of building a custom WordPress theme from scratch, and I have created a template for the posts that will dynamically appear on the front page. To achieve the desired layout, I am utilizing Bootstrap 5. The structure includes a containe ...

Tips for preventing images from stretching the width and height of my HTML

I am facing an issue with my SVG files positioned as "absolute" on my page. When they are close to the corners of the page, they end up expanding the width of my Container element (using Material UI React). I have tried setting "maxWidth":"100vw" on the ...

Efficient Techniques for Deleting Rows in a Dynamic JavaScript Table

I'm facing an issue where I want to remove each line added by the user, one by one. However, my current program is removing all the rows from the table instead of just one at a time. The objective is to allow the user to remove a specific row if they ...

Unleash the power of CSS3 to style this button

I received an image of a button that I need to replicate on a website, but unfortunately, only the image was provided without any information about the font-family or size. Despite not being a designer or CSS expert, I attempted to create a CSS style that ...

Positioning the bottom of a two-column layout using CSS

I am working on a 2 column layout that should have a height of 100% of the window size. The left side will contain an image taking up 90% of the window size positioned at the bottom of the wrapper. On the right side, there will be text occupying the top 50 ...

The background color and border are not showing up in the <div> element

I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...

How do I apply a xPage page style using the styleClass attribute instead of directly using the style attribute

Would like to know how to change the background color of an entire page using styleClass instead of directly in the xp:view tag? Here's an example that works: <xp:view xmlns:xp="http://www.ibm.com/xsp/core" style="background-color:#f1f1f1;"> ...

Issues with fonts in Google Chrome Version 32.0.1700.76 m

After recently updating my Google Chrome browser, I noticed that some of the fonts are not displaying correctly. Interestingly, they appear fine on other browsers, but the issue only seems to occur in Chrome v32.0.17...76 m. The fonts I used were "Open Sa ...

Tips for showcasing devnagri script from user input on a php webpage

On one of my PHP pages, I have changed the font for input to Devnagri. Now, I need to display it on the next PHP page and also insert it into MySQL. The first page, index.php, contains the following details... <table width="535" height="54" border=" ...

The functionality of using variables in conjunction with the .insertAfter method appears to be

As a novice coder with limited English skills, I apologize in advance. Here is the CSS code snippet I am working with: #wrapper{ width: 200px; height: 300px; border: solid 1px #000; overflow: visible; white-space: nowrap; } .page{ ...

Adjust the text placement on an adaptable image according to a particular section of the image

For accessibility reasons, I have an image that requires text to be overlaid on it. The image is responsive thanks to Bootstrap's img-responsive class. I need the text to stay positioned correctly on the image even as its size changes. Is there a way ...

Include a class in the html root tag

Is there a way to dynamically add a class to the root HTML tag when a specific button is clicked? Most resources I've found only show how to add classes to div elements with IDs. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...