title: how to do hover/hide radio buttons using jquery while mouse hover on another radio button or its label, php/mysql
body: <p>When the user is hovering on a radio button/its label i want to display another radio button, that user can also select but if mouse moves the 2nd radio button hides again. i have found this last jquery snipet that shows choices while hovering on link tag</p>
  
  <p><a href="http://www.stylesfirst.com/coding/easy-show-hide-with-jquery/" rel="nofollow">http://www.stylesfirst.com/coding/easy-show-hide-with-jquery/</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  p.trigger {
      padding: 0 0 0 20px;
      margin: 0 0 5px 0;
      background: url(plusminus.jpg) no-repeat;
      height: 15px;
      font-size: 14px;
      font-weight: bold;
      float:left;
  }
  p.trigger a {
      color: #474747;
      text-decoration: none;
      display: block;
      cursor:pointer;
  }
  p.trigger a:hover {
      color: #ff4b43;
  }
  p.active {
      background-position: left bottom;
  }
  .toggle_container {
      margin: 0 0 5px;
      padding: 0;
      overflow: hidden;
      clear: both;
  }
  .toggle_container .block {
      padding: 0px 0px 0px 15px;
  }
  &lt;/style&gt;
  &lt;script type='text/javascript' src='jquery.js'&gt;&lt;/script&gt;
  &lt;script type='text/javascript'&gt;
   jQuery(document).ready(function(){
      jQuery('.toggle_container').hide();
       jQuery('p.trigger').hover(function(){
      jQuery(this).toggleClass('active').next().toggle('slow');
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p class="trigger"&gt;&lt;a&gt;Click here&lt;/a&gt;&lt;/p&gt;
  &lt;div class="toggle_container"&gt;
    &lt;div class="block"&gt;
       &lt;input id='element_1_1' name='element_1' class='element radio' type='radio' value='8'/&gt;
     &lt;label class='choice' for='element_1_1'&gt;Somewhere in the middle&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>