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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -