html - CSS Transition 和复选框标签的问题

Question

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

如果您看到 the demo ，你会明白我的意思。

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

这有帮助吗？