在单选按钮悬停时显示div

Question

Now I have smth like this: http://jsfiddle.net/54tsowq7/107/

I want to save function if radiobutton selected - div with picture is shown.

But how can I make that when radiobutton text is on hover, the same picture is shown? And when mouseleave - it dissapear?

 $(document).ready(function() { $('input[type="radio"]').change(function() { $('.text, .img').hide(); var $pic = $('#'+$(this).data('picid')); var $text = $('#'+$(this).data('textid')); if ($(this).prop('checked')) { $pic.show(); $text.show(); }else{ $pic.hide(); $text.hide(); } }); }); 

 <div class="img" id="pic2" style='display:none'><img src="http://images.math.cnrs.fr/IMG/png/section8-image.png" alt=""></div> <div class="img" id="pic3" style='display:none'><img src="http://www.simpleimageresizer.com/static/images/simple-image-resizer-128x128.png" alt=""></div> <form class="radiobuttons"> <p class="descr" id="desc1" data-picid="pic2" data-descid="desc1"><input type="radio" name="item1" id="item1" value="1" data-picid="pic2" data-textid="text1">Text 1</p> <p class="descr" id="desc2" data-picid="pic2" data-descid="desc2"><input type="radio" name="item1" id="item2" value="1" data-picid="pic2" data-textid="text2">Text 2</p> <p class="descr" id="desc3" data-picid="pic3" data-descid="desc3"><input type="radio" name="item1" id="item3" value="1" data-picid="pic3" data-textid="text3">Text 3</p> </form> <div class="text" id="text1" style='display:none'>Lorem Ipsum Text1</div> <div class="text" id="text2" style='display:none'>Lorem Ipsum Text2</div> <div class="text" id="text3" style='display:none'>Lorem Ipsum Text3</div> 

Answer 1

You can add mouseenter and mouseout events. But this function will not trigger change event, change event can only trigger when you click on radio button and its attribute or value get changed

$('input[type="radio"]').on('mouseenter',function() {
   // do anything on mouse hover
});
$('input[type="radio"]').on('mouseout',function() {
   // do anything on mouse leave
});

Answer 2

It's a little bit messy, but if I correctly understand, you want something like this?

$(document).ready(function() {


 $('input[type="radio"]').hover(
    function() {
    var $pic = $('#'+$(this).data('picid'));
    var $text = $('#'+$(this).data('textid'));
    if(!$(this).prop('checked')) {
      $pic.show();
      $text.show();
        }
    }, function() {
    var $pic = $('#'+$(this).data('picid'));
    var $text = $('#'+$(this).data('textid'));
     if(!$(this).prop('checked')) {
        $pic.hide();
       $text.hide();;
        }

    }
        );

   $('input[type="radio"]').change(function() {
   $('.text, .img').hide();
    var $pic = $('#'+$(this).data('picid'));
    var $text = $('#'+$(this).data('textid'));

    if ($(this).prop('checked')) {
     $pic.show();
     $text.show();
   }else{  
     $pic.hide();
     $text.hide();
   }
});

});

And put your div images to the bottom of your HTML

Answer 3

Try this:

 function handlerInFunc(){ $(".myPicOneClass").show(); } function handlerOutFunc(){ $(".myPicOneClass").hide(); } $(".myRadioOneClass").hover( handlerInFunc, handlerOutFunc ); 

Of course, give the proper class selector names you desire for the specific elements.