How to use :hover css when mouse is down

Question

I have a dropdown menu that's part of a JavaScript app. It's part of a row of buttons which are styled in a seperate CSS file. The dropdown menu creates a column of buttons that should be styled the same as the originating row.

I need the buttons in the dropdown menu to respond with the same :hover CSS as the row, but I'm having trouble because the mouse must be down for the dropdown menu to be visible. I can take the rules from CSS and write them into the JS like so:

    jQuery(texDiv).mouseover( function() {
      this.style.color = '#000000';
    });

But, I would prefer to reference the :hover CSS rule in some way, so that it is only written in one place in the code. I could just make all of the buttons' hover style be handled by jQuery mouseover adding a class, but now I'm curious about how this can be done.

So, how can I reference/force :hover CSS to take effect when mouse is down? Please direct me if I have missed this answer elsewhere!

Answer 1

simple solution - on mouseover add another class where you could define new color, and on mouseout remove it

Answer 2

To force a :hover wouldnt be understood by other browsers imo. You can define a marker-class in css like this:

// your seperate file
a:hover, .marker {
   // all your needs
}

So you can easyly add a css-class to your

jQuery(texDiv).mouseover( function() {
  $(this).addClass('marker');
});