jquery - 如何在输入和标签元素中创建悬停效果

在这里，我的目标是使用悬停效果将包裹在标签中的图像替换为图像列表。我目前使用Jquery click功能显示和隐藏图像列表，但是我也想在相同位置使用相同图像来介绍悬停效果。

HTML：

<div id="formone">
<input type="radio" name="starrate" value="1.0" id="b"/>
<label for="b"><img id="img1"  src="http://lorempixel.com/10/10"></label>

<input type="radio" name="starrate" value="2.0" id="c">
<label for="c" ><img id="img3"  src="http://lorempixel.com/10/10"></label>

<input type="radio" name="starrate" value="3.0" id="d"/>
<label for="d" ><img id="img5" src="http://lorempixel.com/10/10"></label>
</div>

<ul>
<li>
<img id="img2" src="http://lorempixel.com/10/10" style="position:absolute">
<img id="img4" src="http://lorempixel.com/10/10" style="position:absolute">
<img id="img6" src="http://lorempixel.com/10/10" style="position:absolute">
</li>
</ul>

CSS：

input[type="radio"] {
display: none;
}

#img1, #img3, #img5 {
width: 100px;
height:100px;
}

#img2{
bottom: 25px;
}
#img4 {
bottom: 50px;
}
#img6 {
bottom: 75px;
}

JQUERY：

$("img[id='img2']").css({"display": "none"});
$("img[id='img4']").css({"display": "none"});
$("img[id='img6']").css({"display": "none"});

    $("#img1").click(function(){
        $("img[id='img2']").show();
        $("img[id='img4']").hide();
       $("img[id='img6']").hide();
    });

    $("img[id='img3']").click(function(){
        $("img[id='img4']").show();
        $("img[id='img2']").hide();
        $("img[id='img6']").hide();
    });

     $("img[id='img5']").click(function(){
        $("img[id='img6']").show();
        $("img[id='img2']").hide();
        $("img[id='img4']").hide();
    });

https://jsfiddle.net/tqb0oyy4/

最佳答案

您可以使用data attributes

$('ul img').hide();

$('label img').hover(function() {
  var target = $(this).data('target');
  $(target).show();
  $(target).siblings().hide();
})

input[type="radio"] {
  display: none;
}

#img1, #img3, #img5 {
  width: 100px;
  height:100px;
}

#img2{
  bottom: 25px;
}
#img4 {
  bottom: 50px;
}
#img6 {
  bottom: 75px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formone">
  <input type="radio" name="starrate" value="1.0" id="b"/>
  <label for="b"><img data-target="#img2" id="img1"  src="http://lorempixel.com/10/10"></label>

  <input type="radio" name="starrate" value="2.0" id="c">
  <label for="c" ><img id="img3" data-target="#img4" src="http://lorempixel.com/10/10"></label>

  <input type="radio" name="starrate" value="3.0" id="d"/>
  <label for="d" ><img id="img5" data-target="#img6" src="http://lorempixel.com/10/10"></label>
</div>

<ul>
  <li>
    <img id="img2" src="http://lorempixel.com/10/10" style="position:absolute">
    <img id="img4" src="http://lorempixel.com/10/10" style="position:absolute">
    <img id="img6" src="http://lorempixel.com/10/10" style="position:absolute">
  </li>
</ul>