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来设置复选框输入的样式，因为它看起来有些笨拙。

Answer 1

/编辑后编辑：某些浏览器（如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>。

使用jQuery模拟复选框悬停效果

3 个答案: