jquery - Show a div when hover and hide when blur -
i trying show divs when radio button labels hovered.
in html,
<input id="hello" type="radio" name="greetings" value="hello"> <label for="hello" id="hello-label">test</label> <input id="hi" type="radio" name="greetings" value="hi"> <label for="i" id="hi-label">test</label> <div class="fields-div> <input id="f1" type="radio" name="fields" value="f1"> <label for="f1" >test</label> <input id="f2" type="radio" name="fields" value="f2"> <label for="f2" >test</label> </div> ...
in css,
.fields-div { position: absolute; top: 0; z-index: 100; opacity: 0; visibility: hidden; }
in js,
$('#hello-label').hover(function() { $('.fields-div').css({'opacity': '1', 'visibility': 'visible'}); } $('#hello-label').blur(function() { $('.fields-div').css({'opacity': '0', 'visibility': 'hidden'}); }
when user hovers 1 of radio buttons, displays associated div , div remains on when radio button out of focus, div should hid. div still showing. what's missing here?
why don't use of pure css, this:
#hello-label:hover ~ .fields-div { display: block; }
.fields-div { position: relative; top: 0; display: none; } #hello-label:hover ~ .fields-div { display: block; }
<input id="hello" type="radio" name="greetings" value="hello"> <label for="hello" id="hello-label">test</label> <input id="hi" type="radio" name="greetings" value="hi"> <label for="i" id="hi-label">test</label> <div class="fields-div"> <input id="f1" type="radio" name="fields" value="f1"> <label for="f1" >test</label> <input id="f2" type="radio" name="fields" value="f2"> <label for="f2" >test</label> </div>
Comments
Post a Comment