I need to solve how to get pseudo-element:hover to work on touch devices. I read that along side :hover for mouse input, I should use :focus, that doesn't work either ?

a hover event is triggered when you tap the screen. Although a click event (amongst others) is also fired so if it's like a navigation menu the parent link will get followed before it's children appear.

 

I wrote about how to tack this with navigation http://rbrtsmith.com/2014/12/a-more-robust-dynamic-navigation-system/ if you are interested in how I solved the issue.

You must still depend on JS to create a class and remove a class, correct ?

SCSS, do you mean SaSS ?

Scss and Sass are both Sass, they are just different syntaxes, the most poular syntax being Scss. And yes it does depend on JavaScript, it's possible using CSS alone using a hidden checkbox, but that's a bit unecessary when you just use JavaScript for it's intended use.

Hidden checkbox ?

Hidden checkbox ?

 

You hide a checkbox and use a label with a for attribute that matches the id of the checkbox. You can then use an adjacent sibling selector and the :checked flag to style things based on whether the checkox is checked or not, hence it can simulate click events. Using a JavaScript click event is a better idea though in almost all cases.

Worth pointing out that pseudo-elements don't have pseudo-classes, they inherit from the parent.

instead of selector::before:hover use selector:hover::before

 

You hide a checkbox and use a label with a for attribute that matches the id of the checkbox. You can then use an adjacent sibling selector and the :checked flag to style things based on whether the checkox is checked or not, hence it can simulate click events. Using a JavaScript click event is a better idea though in almost all cases.

 

Are you referring to forms, when you say checkbox, it sounds as if you are ?

 

Wynn - For touch, a:hover::before ?

I mean in general, pseudo classes don't work on pseudo elements, see the CSS in this fiddle:
http://jsfiddle.net/1mr1Lgsb/

As a rule, I try to avoid using hover for obvious reasons. Unless its for styling purposes that targets only desktops.

I mean in general, pseudo classes don't work on pseudo elements, see the CSS in this fiddle:

http://jsfiddle.net/1mr1Lgsb/

 

As a rule, I try to avoid using hover for obvious reasons. Unless its for styling purposes that targets only desktops.

 

What you are saying is the ::after pseudo-element will work on touch devices ?

@@Wynn

Why the double colons? element:hover:before works just fine in everything I've done. Does element:hover::before make any difference?

 

As far as I know pseudo elements don't have any event handlers (Inc JavaScript) and they are used for appearance only.

@@Wynn

Why the double colons? element:hover:before works just fine in everything I've done. Does element:hover::before make any difference?

 

As far as I know pseudo elements don't have any event handlers (Inc JavaScript) and they are used for appearance only.

 

No it won't make any difference, it's just the correct way to write them (post IE8).

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

http://www.w3.org/TR/css3-selectors/#gen-content

 

Maybe I have my wires crossed as to what's being asked?

 

I need to solve how to get pseudo-element:hover to work on touch devices. I read that along side :hover for mouse input, I should use :focus, that doesn't work either ?

So it seems that it's for improved readability between psuedo classes and psuedo elements. I can see why that might be a good thing. Thanks for clearing that up!

 

I am assuming he's referring to the psuedo class 'hover' rather than a hover event of a psuedo element.

Edited January 24, 201511 yr by rbrtsmith

I am assuming he's referring to the psuedo class 'hover' rather than a hover event of a psuedo element.

I'm talking about pseudo-classes !

 

I was informed touch devices don't play well with most pseudo-elements, the only solution is JS.

Mobile browsers play just fine with psuedo elements.

I wouldn't say that, when I tested :hover it was stuck on the :hover state.