使用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

/編輯后編輯：某些瀏覽器（如Opera）似乎允許您執行padding-right:100px以便將鼠標懸停在復選框附近也會突出顯示該復選框。 你可以嘗試浪費一些時間，但我強烈建議你用庫來做。

那種藍色懸停的東西來自操作系統。 只有想象的方式才能集中注意力，但顯然它不起作用。

你可以做我們過去十年來一直在做的事情，將復選框變成隱藏的輸入並使用圖像。 那里有很多圖書館。

這是一個 。

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