How to add CSS hover effect to label under input? I’m trying to find general solution without div IDs.
Live demo can be found on JSFiddle https://jsfiddle.net/AugerHybrid/8u045Lpc
It should expand/shrink the corresponding div when checkbox is checked.
It should show hover effect to indicate that 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>
Aucun commentaire:
Enregistrer un commentaire