Question

现在我有这样的东西： http://jsfiddle.net/54tsowq7/107/

如果选择单选按钮，我想保存功能-显示带有图片的div。

但是当单选按钮文本悬停时如何显示相同的图片呢？当鼠标离开时-它消失了吗？

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

当然，为特定的元素提供所需的适当的类选择器名称。

在单选按钮悬停时显示div

3 个答案: