Button Not Active Until Mouseout

Question

I'd like to say right off the bat that THIS IS NOT A CSS PROBLEM. The following is simply to demonstrate with css the kind of problem I'm having.

In an html page filled with javascript and css, there is a <div> tag with the following styling:

div {
  background-color:#fff;
}
div:hover {
  background-color:#f00;
}
div:active {
  background-color:#000;
}

Point being, I can tell when the element is being hovered because the background will be red, and I can tell when it is clicked because the background will be black.

What's happening is that the hover styling works, but when I click the element, it doesn't change to the active state until, still holding the mouse button down, I pull the mouse out of the element.

This is probably a result of my messing around with the event handlers on the page, but I'm just wondering if anyone else has come across this phenomenon and knows what it might be.

Edit

Here's what I'm working on: http://faithserve.com/jOS/

Click the "App" Menu, and click start. That button-ish thing is what I'm having the problem with.

Some browsers only support :active & :hover on anchor elements. I'd suggest adding .hover on .hover() and .active/.clicked .on('click'); — Christopher Marshall, Jul 26 '13 at 20:34
This is Google Chrome. And the :active styling is showing up, just not until the mouse is pulled out from over the `
` — Samuel Reid, Jul 26 '13 at 20:36
works here or i don't understand your issue: http://jsfiddle.net/UDwRn/ — A. Wolff, Jul 26 '13 at 20:38
Yes, thing is I'm doing a lot of work with other css and event handlers, and I'm not sure where I messed up. I'm just checking to see if anyone has seen this before since it's kinda strange and might know generally what kind of problem I'm having — Samuel Reid, Jul 26 '13 at 20:40
From the docs `:active - When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. ` — Sushanth --, Jul 26 '13 at 20:40
I've edited my question. I'm not having trouble with the css, I'm having trouble with the Javascript, and the css I put up there is just to demonstrate the kind of problem I'm having. — Samuel Reid, Jul 26 '13 at 20:43
@SamuelReid I don't understand, how is it related to javascript? — A. Wolff, Jul 26 '13 at 20:48
Check your CSS file, you are setting :active before :hover ... — A. Wolff, Jul 26 '13 at 20:56

score 1 · Accepted Answer · edited May 23 '17 at 11:48

You problem is the order of the css definitions. States have a particular order in which they need to be defined. See the end bit of this answer: https://stackoverflow.com/a/7508202/476786

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

In your question you have them the correct way, so it can't be repro'd, whereas I have a demo here which shows the wrong way too: http://jsfiddle.net/pratik136/nbW6L/

/* Right */
div.right {
  background-color:#fff;
}
div.right:hover {
  background-color:#f00;
}
div.right:active {
  background-color:#000;
}

/* Wrong */
div.wrong {
  background-color:#fff;
}
div.wrong:active {
  background-color:#000;
}
div.wrong:hover {
  background-color:#f00;
}

score 0 · Answer 2 · answered Jul 26 '13 at 20:41

0

You have to be sure CSS rule :hover is setted before :active. You could use that instead of just :active :

div:hover:active {
  background-color:#000;
}

DEMO

answered Jul 26 '13 at 20:41

A. Wolff

74,033
9
94
155

Button Not Active Until Mouseout

2 Answers2