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 example

Answer 1

添加/删除类而不是css

＆＃13;

 $('.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));
    }

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

据我所知并经历过（经验是最好的老师），：伪元素不属于DOM。因此，Javascript选择器无法选择或制作它们。

您可以尝试为悬停状态添加类，然后您可以检查或执行该类的任何操作;例如“.hover”

Javascript Jquery按悬停

2 个答案: