I am working on creating a quiz example using Jquery, but I am facing some challenges when trying to manipulate CSS classes with hover in Jquery.
.right{
background-color: white;
}
.wrong {
background-color: white;
}
.right:hover {
background-color: yellow;
}.wrong:hover {
background-color: yellow;
}
In my CSS, I have defined the initial background colors for classes right and wrong. Using Jquery, my goal is to change these colors to green and red respectively, and then return them back to normal after 1.5 seconds as shown below:
//change colors
$('.right').click( function() {
var $el = $(".wrong"),
originalColor = $el.css("background-color");
$('.wrong').css("background-color" , "red");
$('.right').css("background-color" , "green");
test(originalColor);
})
async function test(originalColor){
await sleep(1500);
$('.wrong').css("background-color" , originalColor);
$('.right').css("background-color" , originalColor);
}
function sleep(ms){
return new Promise(resolve => setTimeout(resolve, ms));
}
//change colors
Everything seems to be working fine, except for the hover effect. After the first Jquery click event, the hover color is lost. It appears that the line $el2 = $(".wrong:hover") may be causing this issue. Can someone help me modify the code so that the background-color: yellow; on hover is retained even after the first Jquery function?