I am looking to enhance the user experience by implementing a hover effect to display images instead of wrapping them in labels. Currently, I utilize JQuery's click functionality to toggle between showing and hiding the images. However, I also want to incorporate a hover effect using the same images in their original positions.
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();
});