时间戳

首页 > 解决方案 > 在单选按钮悬停时显示 div

javascript - 在单选按钮悬停时显示 div

问题描述

现在我有这样的东西：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>

标签： javascriptjqueryhtml

解决方案

尝试这个：

function handlerInFunc(){
    $(".myPicOneClass").show();
}

function handlerOutFunc(){
    $(".myPicOneClass").hide();
}

$(".myRadioOneClass").hover( handlerInFunc, handlerOutFunc );

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

推荐阅读