CODEWITHSUNDEEP
htmlcsscheckboxlabelcss-transitions
fmuser
fmuser

Reputation: 254

Issue with CSS Transition and the Label of a Checkbox

I want to change the position of my label when the checkbox is checked. This works fine if I don't transition the top offset property of my label. However, if I add a transition to this value (see the commented code), click on the label and don't move the cursor of my mouse the label seems that is still on hover state. That means, even though I don't hover on it, the cursor is a pointer and the background-color green (hover state of label).

If you see the demo, you'll understand what I mean.

My HTML code is the following:

<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>

My CSS:

* {
    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;
}

Any idea why that's happening?

Upvotes: 0

Views: 1076

Answers (2)

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

So, a little bit of jQuery might help us out here. Take a look at this jsFiddle.

CSS change:

.label--hovered { background: green; }

instead of:

label:hover { background: green; }

i.e. converted it to a class.

JavaScript:

$(document).ready(function(){
    $('label').hover(function(){
        $(this).removeAttr('style').addClass('label--hovered');
    }, function(){
        $(this).css('cursor', 'default').removeClass('label--hovered');
    }).click(function(){
        $(this).trigger('mouseleave');
    });
});

Does this help?

Upvotes: 1

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

You are using the syntax for the transition property but on transform. Additionally, transform doesn't take a top value. It takes scale, rotation, skew etc. You probably want this:

transition: top .3s ease;

Also don't forget to add vendor prefixes. (ie. webkit).

Upvotes: 0

Related Questions