When the user is hovering on a radio button/its label i want to display

Question

0

Asked: May 24, 20262026-05-24T13:22:14+00:00 2026-05-24T13:22:14+00:00

When the user is hovering on a radio button/its label i want to display

0

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

http://www.stylesfirst.com/coding/easy-show-hide-with-jquery/

<html>
<head>
<style type="text/css">
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;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
 jQuery(document).ready(function(){
    jQuery('.toggle_container').hide();
     jQuery('p.trigger').hover(function(){
    jQuery(this).toggleClass('active').next().toggle('slow');
    });
});
</script>
</head>
<body>
<p class="trigger"><a>Click here</a></p>
<div class="toggle_container">
  <div class="block">
     <input id='element_1_1' name='element_1' class='element radio' type='radio' value='8'/>
   <label class='choice' for='element_1_1'>Somewhere in the middle</label>
  </div>
</div>
</body>
</html>