Javascript Jquery使用鼠标悬停按类获取元素

我想使用Jquery创建一个测验示例。但是我对如何使用hover on Jquery获取css类有点迷茫。 我的css代码如下：

.right{
  background-color: white;
}
.wrong {
  background-color: white;
}
.right:hover {
   background-color: yellow;
}.wrong:hover {
   background-color: yellow;
}

使用Jquery，我将类的背景颜色错误和正确更改为绿色和红色，1.5秒后，我使用以下代码将它们恢复到正常状态：

//change colors
     $('.right').click( function() {
        var $el = $(".wrong"),
        originalColor = $el.css("background-color");
        var $el2 = $(".wrong:hover"),
        hover = $el2.css("background-color:hover");
        $('.wrong').css("background-color" , "red");
        $('.right').css("background-color" , "green");
        test(originalColor,hover);
        })


     async function test(originalColor,hover){
       await sleep(1500);
        $('.wrong').css("background-color" , originalColor);
        $('.right').css("background-color" , originalColor);
        $('.wrong:hover').css("background-color" , hover);
        $('.right:hover').css("background-color" , hover);
     }
    function sleep(ms){
      return new Promise(resolve => setTimeout(resolve, ms));
    }
//change colors

除了悬停部分，一切正常。在第一个Jquery单击函数之后，悬停的

背景色

丢失。看起来

$el2=$（“.error:hover”）

在语法上是错误的。你能帮我修改代码吗，这样我就不会丢失

背景色：黄色在第一个Jquery函数之后悬停？？
小提琴示例：
据我所知和经验（经验是最好的老师），：psuedo元素不是DOM的一部分。因此，Javascript选择器无法选择或手动操作它们。

您可以尝试为悬停状态添加类，然后您可以检查该类或对该类执行任何操作；例如“.hover”
据我所知和经验（经验是最好的老师），：psuedo元素不是DOM的一部分。因此，Javascript选择器无法选择或手动操作它们。

您可以尝试为悬停状态添加类，然后您可以检查该类或对该类执行任何操作；例如“.hover”
添加/删除类而不是css


$（'.right，.error'）。单击（函数（）{
var$el=$（“.error”），
原色=$el.css（“背景色”）；
var$el2=$（“.error:hover”），
hover=$el2.css（“背景色：hover”）；
$（'.error'）.addClass（“红色”）；
$（'.right'）.addClass（“绿色”）；
测试（原色、悬停）；
})
异步功能测试（原色、悬停）{
等待睡眠（1500）；
$（'.error'）.removeClass（“红色”）；
$（'.right'）.removeClass（“绿色”）；
}
功能睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
div{
宽度：50%；
高度：40px；
浮动：左；
}
.对{
背景色：白色；
}
.错了{
背景色：白色；
}
.右：悬停{
背景颜色：黄色；
}.错：悬停{
背景颜色：黄色；
}
.红色，.红色：悬停{
背景色：红色；
}
.绿色，.绿色：悬停{
背景颜色：绿色；
}

赖特
错误
添加/删除类而不是css


$（'.right，.error'）。单击（函数（）{
var$el=$（“.error”），
原色=$el.css（“背景色”）；
var$el2=$（“.error:hover”），
hover=$el2.css（“背景色：hover”）；
$（'.error'）.addClass（“红色”）；
$（'.right'）.addClass（“绿色”）；
测试（原色、悬停）；
})
异步功能测试（原色、悬停）{
等待睡眠（1500）；
$（'.error'）.removeClass（“红色”）；
$（'.right'）.removeClass（“绿色”）；
}
功能睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
div{
宽度：50%；
高度：40px；
浮动：左；
}
.对{
背景色：白色；
}
.错了{
背景色：白色；
}
.右：悬停{
背景颜色：黄色；
}.错：悬停{
背景颜色：黄色；
}
.红色，.红色：悬停{
背景色：红色；
}
.绿色，.绿色：悬停{
背景颜色：绿色；
}

赖特
错误
重复，请在此处查看类似问题：@Levano我看不到与您发布的链接有任何相似之处。。我不想动态更改我的悬停，我只想让它保持原样..重复，请在此处查看类似问题：@Levano我看不到与您发布的链接有任何相似之处。。我不想动态地改变我的悬停，我只想让它保持原样。。