用jQuery模拟复选框悬停效果

Question

当您使用jQuery将鼠标悬停在复选框上时，我将如何模拟复选框上发生的效果？在Chrome和Firefox中执行此操作时，复选框输入将以蓝色突出显示。

为了给出更多的上下文，我有一个网格，如下所示：

<table>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>this is a checkbox</td>
        </tr>
    </tbody>
</table

我想让复选框在用户将鼠标悬停在<tr>上时突出显示为默认的蓝色

我意识到我可以在this is a checkbox周围放置一个标签，并引用带有for属性的复选框，但是我更愿意在悬停在<tr>上时触发这个效果。

我对使用CSS设置checkbox输入本身的样式有点怀疑，因为它看起来有点老套。

Answer 1

编辑后的/edit :一些浏览器(如Opera)似乎允许你做像padding-right:100px这样的事情，所以将鼠标悬停在复选框附近也会突出显示复选框。您可以尝试在这方面浪费一些时间，但我强烈建议您使用库。

这种蓝色的悬停是操作系统造成的。唯一能想到的方法就是聚焦它，但显然这是行不通的。

你可以做我们在过去十年中一直在做的事情，把复选框变成隐藏的输入并使用图像。外面有很多库。

Here's one。

Answer 2

我想说，为了保持外观的一致性，最好的办法就是用你自己制作的复选框来代替复选框。我从我不久前制作的一个插件中提取并编辑了这段代码。

演示： http://jsfiddle.net/elclanrs/jTteE/

html:

<label><input type="checkbox">Hey</label>

css:

input[type="checkbox"] {
    position: absolute;
    margin-left: -9999px;
}
.check {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: .5em;
    width: 1.1em;
    height: 1.1em;
    background: #ddd;
}
.check:hover {
    background: pink;
}
.check.checked {
    background: red;
}
.check.checked:after {
    content: "\2713";
    position: absolute;
    font-size: 22px;
    font-weight: bold;
    line-height: 16px;
    top: 0;
    z-index: 999;
    color: white;
}

js:

// Check
$('input:checkbox').each(function() {
    $(this).before('<span class="check"></span>');
    if ($(this).is(':checked')) {
        $(this).prev('span').addClass('checked');
    }
}).change(function() {
    $(this).prev('span').toggleClass('checked');
});

Answer 3

ajbeaven先生，这是<label>标签！;-)

答案： http://jsfiddle.net/wh5N9/76/

没有javascript，只有HTML javascript...

对label执行的任何鼠标操作都将反映在其复选框上(包括悬停和单击)。

<label>标签定义元素的标签。

<label>元素不会呈现为用户所特有的任何内容。但是，它为鼠标用户提供了可用性改进，因为如果用户单击<label>元素中的文本，就会切换控件。

<label>标记的for属性应该等于相关元素的id属性，以便将它们绑定在一起。

您只需要匹配标签的“”属性中的复选框id，如下所示：

<input type="checkbox" id="YAHOO"><label for="YAHOO">whatever whatever</label>

您可以为一个复选框设置任意多个标签，并以固定的宽度和高度设置它们的样式，以便它可以像您希望的那样高或宽，并且恰好适合您的tr。

我可以使用jQuery来定位点击tr的复选框，但不能模拟它的悬停效果。因此，我不得不求助于<label>__。