jquery - 如何在 input 和 label 元素中创建 mouseover 和 mouseleave 效果

Question

这里我的目标是使用 mouseover 和 mouseleave 效果将标签中的图像替换为图像列表。我目前使用 Jquery 点击功能来显示和隐藏图像列表。

示例:

如果鼠标在 img1 上，则 img2 出现，一旦鼠标离开 img1，则 img2 消失单击 img1 后，img2 会保持原样。我希望其他人具有相同的功能，所以假设我们现在可以看到 img2 我希望看到 img4 出现并且 img2 如果鼠标消失输入 img3，如果鼠标离开，则返回 img2。

基本上与 this 的答案相同的功能

HTML:

<div>

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

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

<input type="radio" 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();
    });

fiddle

Answer 1

我认为您应该使用类来跟踪状态。或者您可以为每个图像制作对象并添加跟踪状态的属性。我为你做了一个例子 JSFIDDLE

img1 = {
  node: $('#img1'),
  target: $('img[id=img2]'),
  clicked: false
};

img3 = {
    node: $('#img3'),
  target: $('img[id=img4]'),
  clicked: false
};

img5 = {
    node: $('#img5'),
  target: $('img[id=img6]'),
  clicked: false
};