How to keep hover states in Chrome while mouse is pressed?

Question

I'm stopping a mousedown event when my users press on a custom dropdown list. This is to avoid the default text-highlighting behaviour of the browser while the user is effectively dragging the mouse.

I'm doing this with a jQuery event.preventDefault() call in the handler function and returning false.

This has the desired effect, except that in Chrome it also prevents CSS :hover states to work while the mouse is still pressed.

Firefox doesn't suffer the same problem. The text highlighting is cancelled, and the :hover states continue to work as the user rolls over items with the mouse still pressed.

Is there a method that will work in Chrome too?

I could add further mouseover handlers to add custom classes, but I'd prefer a more graceful solution so I can use the :hover pseudo classes in my CSS.

Looks like the text-highlighting and event stopping are red herrings. Chrome just doesn't seem to activate :hover states with the mouse pressed. I may resorts to JS mouseovers — Tim, Jul 05 '12 at 19:08
When you say custom dropdown do you mean something made up log list items and anchors? — Master Morality, Jul 05 '12 at 19:56

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

0

Well to prevent highlighting of text, there is a CSS3 property for that. I found this info in a SO question." Prevent Highlight of Text Table "

EDIT: I think this one " How to disable text selection highlighting using CSS? " is better because there are more browsers covered thus making it more cross-browser.

edited May 23 '17 at 11:48

Community

1
1

answered Jul 05 '12 at 18:17

keithxm23

1,280
1
21
41

Interesting. It certainly stops the selection. But Chrome still refuses to do the :hover states with the mouse pressed. I guess this shows that the text highlighting is a red herring. – Tim Jul 05 '12 at 18:28

score 0 · Answer 2 · answered Jul 05 '12 at 18:24

0

You could define your CSS as :hover, .hover { ... } And then just toggle the class on mouseover

answered Jul 05 '12 at 18:24

Master Morality

5,837
6
31
43

I may end up doing that although in my question I stated that I'd rather not. – Tim Jul 05 '12 at 19:07
Sorry I missed the last bit of your post. I'm going to blame my iPhone :) – Master Morality Jul 05 '12 at 19:47

score 0 · Answer 3 · answered Jul 05 '12 at 22:04

0

On document mousedown just add this class to the body:

.stopSelect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

This will prevent text selection. On mouseup remove the class.

answered Jul 05 '12 at 22:04

Mircea

11,373
26
64
95

good to know about this, as mentioned already in the answers. This property doesn't enable the :hover states while 'dragging' though. I'm handling this with JS mouseovers, although I didn't want to. – Tim Jul 06 '12 at 09:42

How to keep hover states in Chrome while mouse is pressed?

3 Answers3