入力とラベルの要素内でmouseoverとmouseleaveの効果を作成する方法

Question

ここで私の目的は、マウスオーバーとマウスリーブのエフェクトを使って、ラベルの中にラップアップされたイメージをイメージのリストに置き換えることです。私は現在、Jqueryのクリック機能を使って画像の一覧を表示したり隠したりしています。

例：

マウスはimg2その後、img1上に表示されているとマウスがimg1を離れるとimg1はそれがあるimg2滞在をクリックされたら、その後img2は、しかし消えた場合。他の人にも同じ機能が欲しいので、img2img4が表示され、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 
};