I recently had a discussion with a colleague about how the :hover pseudo class selector is generally implemented in browsers. The question concerns what actually happens behind the scenes, when a pointer hovers an element on a website. ":hover on touch devices" is a problem, that has already been discussed exhaustively.
My understanding is, that the :hover selector is implemented to create some convenience when dealing with standard behavior on websites, meaning in the end it triggers mouseover/mouseout events and saves you some lines of tedious JavaScript code.
My colleague on the other hand said there are no events involved. In the end nothing more occurs than a change in the state of an element that gets recognized and handled.
I finally ended up digging the web:
http://www.w3.org
https://developer.mozilla.org
But I did not find any real answer to this question.
So I finally ask the community!
EDIT:
Thanks for the first replies.
But digging even deeper I found this one what makes me think again:
http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/
If :hover in combination with visibility manipulation triggers a double-tab, which in the end is an event, there still seems to be some connection between states and events. Even if it is buggy behavior.
:hover is part of the CSS (Cascading Style Sheets) language. For Safari, this language is implemented in Webkit, the layout engine for the browser. (See this listing of other layout engines for other browsers). The support for the pseudo class :hover in Webkit is done with C++; you may review the source code here.
Webkit's source code defines PseudoClassHover as a numeric value in an enumerated list of flags with a value of zero, as follows:
PseudoClassHover = 1 << 0,
Another function adds the following definition:
DEPRECATED_DEFINE_STATIC_LOCAL(String, hover, (ASCIILiteral("hover")));
Determining whether the pseudo class involves :hover is determined in the following else-if statement nested in a loop:
else if (pseudoClass == hover)
result |= PseudoClassHover;
The snippet shows an assignment operator performing a bitwise OR with variables result and PseudoClassHover, assigning the generated value to the first variable result.
This next portion of the source code suggests that your colleague is correct at least with respect to Safari; a change of state occurs based upon returning a value after applying a bitwise AND.
case CSSSelector::PseudoClassHover:
return forcedPseudoState & PseudoClassHover;
I acknowledge that this answer only partially addresses the question. To fully answer it is a daunting task since it requires inspecting the source code of all the other layout engines used by all the other browsers to confirm whether they have a similar implementation. Inspecting the source code is a good recommendation provided that the code is available for one to peruse, as is the case with opensource software.