Javascript Jquery get element by class with hover

Question

I want to create a quiz example using Jquery.However I am a bit lost with how to get the css class with hover on Jquery. My css code is the following:

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

Using Jquery I change the background colors of classes wrong and right to green and red and after 1.5 seconds I return them back to normal with the following code:

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

Everything works fine except the hover part.After the first Jquery click function the background-color of the hover is lost.It looks like that $el2 = $(".wrong:hover") is syntactically wrong.Can you help my on how to chage the code so I do not lose the background-color: yellow; on the hover after the first Jquery function?? Fiddle example: Fiddle example

Duplicate, please see a similar issue here: stackoverflow.com/questions/275891/… — Levano
– Levano, Commented Aug 15, 2017 at 13:07
@Levano I don't see any similarities with the link you posted.. I don't want to change my hover dynamicly I just want it just to remain as it is.. — Vasilis Michail
– Vasilis Michail, Commented Aug 15, 2017 at 13:13

Niklesh Raut · Accepted Answer · 2017-08-15 13:15:29Z

Add/Remove class instead of 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>

ilkercan k. · Accepted Answer · 2017-08-15 13:11:06Z

0

As far as I know and experienced it (experience is the best teacher), :psuedo elements are not part of the DOM. So, Javascript selectors can not select or manuplate them.

You might try adding classes for hover state then you can check or do whatever you want with that class; for example ".hover"

answered Aug 15, 2017 at 13:11

ilkercan k.

431 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Javascript Jquery get element by class with hover

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related