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

【问题标题】：Javascript Jquery get element by class with hoverJavascript Jquery通过悬停按类获取元素
【发布时间】：2017-08-15 13:02:55
【问题描述】：

我想使用 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

【问题讨论】：

重复，请在此处查看类似问题：stackoverflow.com/questions/275891/…
@Levano 我看不出与您发布的链接有任何相似之处。我不想动态更改我的悬停，我只想让它保持原样..

标签： javascript jquery css html

【解决方案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>

【讨论】：

【解决方案2】：

据我所知和经验（经验是最好的老师），:psuedo 元素不是 DOM 的一部分。因此，Javascript 选择器无法选择或操作它们。

您可以尝试为悬停状态添加类，然后您可以对该类进行检查或做任何您想做的事情；例如“.hover”

【讨论】：