CODEWITHSUNDEEP
jqueryhtmlcss
Abdullah Salma
Abdullah Salma

Reputation: 570

jquery force style over css file

I have a div inside a div.. working more like a drop menu. my problem is when I click on the #two div. I want to disappear.

so I used jquery. and I used .hide() or .slideUp().

but when any of them is used then I tried I hover over #one, #two never appear again?

I checked why. I found out jquery add attribute to div#two as style="display:none". and css will not override that.

and if I add in css: to display: block !important;. jquery will not hide #two when is clicked.

what is the middle ground to this. if I re-triggered the class which hide #two it will not work. because the mouse still over #one. 

<div id="one">
    <span>Main</span>
    <div id="two">Sub</div>
</div>

css will be:

#one{
    position: relative;
}

#two {
    display: none;
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
}

#one:hover #two {
    display: block;
}

Upvotes: 0

Views: 56

Answers (1)

Stefan Ticu
Stefan Ticu

Reputation: 2103

I think you are linking your js actions badly. Plus the best practice is not to mingle the use of .show() and .hide() with display in css. Choose your solution (js vs css) and stick to it.

Delete your: 

#one:hover #two {
    display: block;
}

Here is the needed js: 

$('#one span').click(function(){
    $('#two').show();
})

$('#two').click(function(){
    $('#two').hide();
});

Here is a working fiddle: https://jsfiddle.net/q27tu1cg/

Upvotes: 1

Related Questions