How to use :hover css when mouse is down


Tags: javascript,jquery,css

Problem :

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!



Solution :

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


    CSS Howto..

    CSS - How to working with multi-level menu by simple

    How to edit ol tags in rich text editor

    How can I dock the button to jQueryUI dialog bottom as the dialog inner content increases?

    How to enable CDN CSS in Brackets, Chrome?

    How to get elements by class and provide css effects?

    How to change the width of bootstrap popover

    cannot figure out how to make text appear inside div after hover animation

    how to make div static in css

    Speechbubble tooltip in CSS - how to move the arrow

    How do I style HTML in a JEditorPane?

    How to exclude Hover for Active LI (Menu)?

    How Do I Place An Image To The Right of a Body of Text?

    How can I get this element to clear the image so it sits in middle off the page on top of the background

    How to apply properties to 3 types of input on HOVER?

    How to hide this element using CSS or JQuery

    CSS: How to do image change on rollover

    How would I make this into an dynamic :nth-child css selector [duplicate]

    How to add Print headers and footers in HTML, CSS and JavaScript?

    How to set a:link height/width with css?

    How to dynamically change element alignment?

    How to avoid the overlapping of the button?

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    how to get both icon and heading in same line in css

    How to center in CSS only after specific HTML element?

    How to remove “gap” from nav bar and line?

    how to link css files in organization github pages

    slideshow banner without using flash

    newbie css/php question - how to get a div between a label and an input with cakephp

    How can I center this textbox using CSS?

    Android - How do I create an email body from a file that contains css and html?