关于CSS过渡和复选框标签的问题

Question

我想在复选框被选中时更改标签的位置。如果我不转换我的标签的top偏移属性，这工作得很好。但是，如果我向这个值添加一个过渡(请参阅注释代码)，单击标签并且不移动鼠标光标，标签似乎仍然处于悬停状态。这意味着，即使我没有悬停在它上面，光标也是一个指针，背景颜色为绿色(标签的悬停状态)。

如果你看过演示，你就会明白我的意思。

我的HTML代码如下:

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

我的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;
}

知道为什么会这样吗?

Answer 1

一些jQuery可能会对我们有所帮助。看一下这个jsFiddle

CSS改变:

.label--hovered { background: green; }

代替:

label:hover { background: green; }

。将其转换为一个类。

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');
    });
});

这有帮助吗?

Answer 2

您正在使用transition属性的语法，但在transform上。此外，transform不取最大值。它需要缩放，旋转，倾斜等。你可能想要这样:

transition: top .3s ease;

也不要忘记添加供应商前缀。(即。webkit)。