入力およびラベル要素内にホバー効果を作成する方法

Question

ここでは、ラベルに囲まれた画像をホバー効果を使用する画像のリストに置き換えることを目標にしています。現在、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：あなたはdata attributesを使用することができます

$("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/

Answer 1

$('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>