启用javascript而不是css显示时使用jQuery slideToggle:block

我想在鼠标悬停在按钮上时显示带有复选框的

div

。如果浏览器中启用了

javascript

，我希望执行

jQuery

代码。我已经为

hover

编写了

CSS

代码，作为禁用

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>

jQuery

代码是

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

---

这是fiddle链接：

一种方法是向button\u div元素添加一个类，比如说

jscheck

。然后在CSS中，将规则更改为针对该新类

因此，将

#button_div:hover>#checkbox_div

更改为

#button_div.jscheck:hover>#checkbox_div

最后，在jQuery中，删除该类。这样，如果启用了JavaScript，该类将被删除，CSS将不会被应用。但是，如果JavaScript不可用，则该类将保留，CSS将正常工作

---

其他人所说的是正确的

本质上，您需要将一个类绑定到应用了悬停效果的元素，例如，

no js

，并在加载JavaScript时删除它（如果有）

简单的改变真的很简单

HTML CSS

---

这是。

您必须查看一个

。无js

类。

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

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

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

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

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