Question

我想在选中复选框时更改标签的位置。如果我不转换标签的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;
}

知道为什么会这样吗？

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

CSS Transition和Checkbox标签的问题

2 个答案: