Question

当鼠标悬停在按钮上时，我希望显示一个div复选框。如果在浏览器中启用jQuery，我希望执行javascript代码。如果CSS被禁用，我已为hover编写了javascript代码。但CSS代码始终会覆盖jQuery代码。如何实现我想要的目标。

html代码如下

<div id="button_div">
    <button id="hover_button" type="button">Select Options</button>
    <div id="checkbox_div">
        <form>
            <input id="one" type="checkbox" value="one" />
            <label for="one">One</label>
            <br />
            <input id="two" type="checkbox" value="two" />
            <label for="two">Two</label>
            <br />
            <input id="three" type="checkbox" value="three" />
            <label for="three">Three</label>
            <br />
            <input id="four" type="checkbox" value="four" />
            <label for="four">Four</label>
            <br />
        </form>
    </div>
</div>

CSS是

#button_div {
    width: 120px;
}
#hover_button {
    width: 120px;
}
#checkbox_div {
    display: none;
    position: relative;
    top: -26px;
    font-family: Verdana, sans-serif;
    background-color: #EEEEEE;
    width: 200px;
}
#button_div:hover>#checkbox_div {
    display: block;
}

jQuery代码

$(document).ready(function () {
    $("#button_div").hover(function () {
        $("#checkbox_div").slideDown("slow");
    });
});

这是小提琴链接：http://jsfiddle.net/LdzPE/

Answer 1

一种方法是在button_div元素中添加一个类，比如说jscheck。然后在您的CSS中，更改规则以定位该新类。

所以将#button_div:hover>#checkbox_div更改为#button_div.jscheck:hover>#checkbox_div。

最后，在你的jQuery中，删除该类。这样，如果启用了JavaScript，则会删除该类，并且不会应用CSS。但是，如果JavaScript不可用，则该类仍然存在且CSS可以正常工作。

<强> jsFiddle example

Answer 2

其他人所说的是正确的。

基本上，您需要将类绑定到应用了悬停效果的元素，例如no-js，并在加载JavaScript时删除它，如果有的话。

真的很简单。

HTML

<div id="button_div" class="no-js">

的JavaScript

$(document).ready(function () {
    var $btnDiv = $("#button_div");

    $btnDiv.removeClass('no-js');
    $btnDiv.not('.no-js').hover(function () {
        $("#checkbox_div").slideDown("fast");
    });
});

CSS

#button_div.no-js:hover>#checkbox_div {
    display: block;
}

这是a fiddle。

在启用javascript而不是css display：block时使用jQuery slideToggle

2 个答案:

HTML

的JavaScript

CSS