Javascript Jquery通过悬停按类获取元素

Question

我想使用 Jquery 创建一个测验示例。但是我对如何通过悬停在 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 单击函数之后，悬停的 background-color 丢失了。看起来像 $el2 = $(".wrong: hover") 在语法上是错误的。你能帮助我了解如何更改代码，这样我就不会在第一个 Jquery 函数后悬停时丢失 background-color: yellow; 吗？ fiddle 示例: Fiddle example

Answer 1

添加/删除类而不是 css

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


     async function test(originalColor,hover){
       await sleep(1500);
        $('.wrong').removeClass("red");
        $('.right').removeClass("green");
     }
    function sleep(ms){
      return new Promise(resolve => setTimeout(resolve, ms));
    }

div{
  width:50%;
  height:40px;
  float:left;
}
.right{
  background-color: white;
}
.wrong {
  background-color: white;
}
.right:hover {
   background-color: yellow;
}.wrong:hover {
   background-color: yellow;
}
.red,.red:hover{
  background-color: red;
}
.green,.green:hover{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="right">Right</div>
<div class="wrong">Wrong</div>