用 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 来设置复选框输入本身的样式，因为它看起来有点 hacky。

Answer 1

/edit after you 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...

对标签所做的任何鼠标操作都会反映在其复选框上（包括悬停和点击）。

<label> 标签定义了一个元素的标签。

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

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

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

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

您可以为复选框设置任意数量的标签，并使用固定的宽度和高度设置它们的样式，以便它可以任意高或任意宽，并且正好适合 tr 你的。

我能够使用 jQuery 将目标复选框单击 tr 单击，但不能模拟其悬停效果。因此，我不得不求助于<label>。