在單選按鈕懸停時顯示div

Question

現在我有這樣的東西： http : //jsfiddle.net/54tsowq7/107/

如果選擇單選按鈕，我想保存功能-顯示帶有圖片的div。

但是當單選按鈕文本懸停時如何顯示相同的圖片呢？ 而當mouseleave-它消失了嗎？

 $(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

您可以添加mouseenter和mouseout事件。 但是此功能不會觸發change事件， change事件只能在單擊單選按鈕時觸發，並且其屬性或值會更改

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

Answer 2

有點混亂，但是如果我正確理解的話，您想要這樣的東西嗎？

$(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();
   }
});

});

並將div圖片放到HTML的底部

Answer 3

嘗試這個：

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

當然，為特定元素提供所需的適當的類選擇器名稱。