html - Using jQuery slideToggle when javascript is enabled instead of css display:block -

i want div checkboxes displayed when mouse hovered on button. want jquery code executed if javascript enabled in browser. have written css code hover work around if javascript disabled. css code overrides jquery code. how achieve want.

the html code follows

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

#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 code is

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

this fiddle link: http://jsfiddle.net/ldzpe/

one way add class button_div element, jscheck. in css, change rule target new class.

so change #button_div:hover>#checkbox_div #button_div.jscheck:hover>#checkbox_div.

finally, in jquery, remove class. way, if javascript enabled, class gets removed , css won't applied. if javascript isn't available, class remains , css works.

jsfiddle example