CSS 过渡和复选框标签的问题答案

【问题标题】：Issue with CSS Transition and the Label of a CheckboxCSS 过渡和复选框标签的问题
【发布时间】：2015-07-11 12:03:23
【问题描述】：

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

如果你看到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;
}

知道为什么会这样吗？

【问题讨论】：

一旦过渡，它只等待鼠标指针最轻微的移动来改变它的颜色，你不想要这种行为吗？我理解正确吗？
是的，没错。实际上，我想要的是表现得就像没有过渡一样。否则，我必须移动鼠标才能实现该行为。
你介意用 jQuery 来解决这个问题吗？
好吧，我可以使用 jQuery，但我真正想知道的是为什么会这样。我在网上搜索，但没有找到类似的问题或类似的问题。奇怪的是为什么只有在添加过渡时才会发生这种情况。
我认为这并不奇怪，因为它是之后需要的最轻微的鼠标移动将一切再次设置为正常，也许人们只是习惯于看到这个行为。我个人认为这只是一种正常的行为。我可能错了。

标签： html css checkbox label css-transitions

【解决方案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');
    });
});

这有帮助吗？

【讨论】：

我同意您的回答是正确的，但我不想为此使用 jQuery。我使用复选框 hack 是因为我想用纯 CSS 做一些事情，并且我试图在没有任何第三方的情况下理解它。

【解决方案2】：

您正在使用 transition 属性的语法，但在 transform 上。此外，transform 没有最高值。它需要缩放、旋转、倾斜等。你可能想要这个：

transition: top .3s ease;

也不要忘记添加供应商前缀。（即 webkit）。

【讨论】：

我更新了注释代码，但如果您尝试演示，您会发现问题发生在正确的属性（即转换）上。