How Can I Show Hidden DIVs on Hover Using Only CSS?

CSS Only Solution for Displaying Hidden DIVs on Hover

The presented challenge involves a menu with three initially hidden DIVs that should become visible based on the user's menu selection using CSS alone. This is to ensure accessibility even when JavaScript is disabled.

CSS Only Approach

To achieve this without JavaScript, the "checkbox hack" comes into play. This method utilizes a checkbox input element with styles assigned based on its checked or unchecked state using the :checked pseudo selector. The checkbox can be hidden by associating it with a label.

Example Code

Consider the following example code:

<input type="checkbox">

input[type="checkbox"]:checked + div {
  display: block;
}

In this example, when the checkbox for Option 1 is checked, the "content-1" DIV will become visible. Similarly, checking the checkbox for Option 2 will reveal the "content-2" DIV.

Additional Clarification

Regarding the client's request for a sliding/fading effect, this is achievable with JavaScript. However, for a CSS-only solution, it is not feasible. Alternatively, you could consider using CSS transitions to create a subtle fade-in effect.

The above is the detailed content of How Can I Show Hidden DIVs on Hover Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!