I'm looking to adjust the position of my label when a checkbox is checked. Everything works smoothly if I don't include a transition for the top offset property in the CSS of my label. However, when this transition is added (as seen in the commented code), clicking on the label without moving the mouse cursor causes it to appear as though it's still in a hover state. This means that even when not actively hovering over the label, the cursor displays as a pointer and the background color remains green (indicating the hover state of the label).
To see exactly what I mean, check out the demo.
Here is the HTML code snippet:
<section>
<input type="checkbox" id="checkbox_id">
<label for="checkbox_id">Click me</label>
<div>
<a href="">This is the first link</a>
<a href="">This is the second link</a>
</div>
</section>
The corresponding CSS is as follows:
* {
margin: 0;
}
section {
position: relative;
padding: 20px;
background: yellow;
}
input[type="checkbox"] {
display: none;
}
label, a {
height: 30px;
padding: 10px 0;
margin: 10px;
}
label {
display: block;
background: tomato;
cursor: pointer;
width: 100%;
position: absolute;
top: 0;
/*transition: top .3s ease;*/
}
label:hover {
background: green;
}
input[type="checkbox"]:checked + label {
top: 100%;
}
a {
display: block;
background: tomato;
}
a:first-child {
margin-top: 50px;
}
Why do you think this behavior is occurring?