I need to change the background color of a set of images based on which image is hovered over. For example, when I hover over the 5th image, the first 5 images' background color should change. Similarly, when hovering over the 4th image, the background color of the first 4 images should change, and so on for the remaining images. How can I achieve this using CSS?
$(document).ready(function(){
$("#images img").click(function(){
var va = $(this).attr("name");
if(va=='5'){
$('.two,.three,.four,.one,.five').addClass('active');
}else if(va=='4'){
$('.two,.three,.four,.one').addClass('active');
$('.five').removeClass('active');
}else if(va=='3'){
$('.two,.three,.one').addClass('active');
$('.four,.five').removeClass('active');
}else if(va=='2'){
$('.two,.one').addClass('active');
$('.three,.four,.five').removeClass('active');
}else if(va=='1'){
$('.one').addClass('active');
$('.two,.three,.four,.five').removeClass('active');
}
$("#result_value").text(va);
});
$("#images img").mouseover(function(){
var va = $(this).attr("name");
if(va=='5'){
$('.two,.three,.four,.one,.five').addClass('active');
}else if(va=='4'){
$('.two,.three,.four,.one').addClass('active');
$('.five').removeClass('active');
}else if(va=='3'){
$('.two,.three,.one').addClass('active');
$('.four,.five').removeClass('active');
}else if(va=='2'){
$('.two,.one').addClass('active');
$('.three,.four,.five').removeClass('active');
}else if(va=='1'){
$('.one').addClass('active');
$('.two,.three,.four,.five').removeClass('active');
}
});
$("#images img").mouseleave(function(){
$('.one,.two,.three,.four,.five').removeClass('active');
});
});
<style>
.clr:hover{
background-color:#FFD700;
}
.active{
background-color:#FFD700;
}
</style>
</head>
<body>
<div class="images" id="images">
<form name="imagediv" id="imagediv" method="post">
<img src="star1.png" class="one" alt="Number 1" name="1" width="42" height="42">
<img src="star2.png" class="two" alt="Number 1" name="2" width="42" height="42">
<img src="star3.png" class="three" alt="Number 1" name="3" width="42" height="42">
<img src="star4.png" class="four" alt="Number 1" name="4" width="42" height="42">
<img src="star5.png" class="five" alt="Number 1" name="5" width="42" height="42">
</form>
</div>
<div class="result_value" id="result_value" ></div>
</body>
I have implemented logic for both clicking and hovering over the images. However, while the added class should not be removed after click, it should be removed after mouseout during hover. Currently, the class is not being removed upon mouseout, despite applying a mouseout event listener. This seems to affect the functionality for both click and hover actions.