2

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.

thilo.dev
  • 210
  • 1
  • 10
  • 1
    Events will be triggered, in case you have Javascript handlers for them, but that's independent of how the browser handles it internally. That's implementation-dependent. – Barmar Dec 11 '14 at 08:50
  • 1
    As far as the CSS spec is concerned, it is in fact a state. Either the mouse pointer is over an element (`:hover`), or it isn't (`:not(:hover)`). See http://stackoverflow.com/questions/11703241/does-css-have-a-blur-selector-pseudo-class *How* this is implemented can only be discovered by reading the source code. – BoltClock Dec 11 '14 at 08:52
  • 5
    This question appears to be off-topic because it is about browser implementations, not about practical programming problems. – Jukka K. Korpela Dec 11 '14 at 09:32
  • 1
    Heh, this question has lead me to discover a typo in the [*user action pseudo-classes* section of the Selectors Level 3 specification](http://www.w3.org/TR/css3-selectors/#the-user-action-pseudo-classes-hover-act): *"User agents not that do not support interactive media..."* - that first "not" shouldn't be there. :-) – James Donnelly Dec 11 '14 at 11:14

1 Answers1

0

: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.

slevy1
  • 3,797
  • 2
  • 27
  • 33
  • 1
    Saying :hover is not implemented in the browser is like saying HTML, CSS and JS are not implemented in the browser. If that were the case, how does a browser work? – BoltClock Dec 11 '14 at 09:31
  • Unless you're trying to say that it's implemented in the *layout engine* or some other component of the browser rather than at a higher level (i.e. the "browser" being the user-facing part of the software), but that is not very clear from your answer. Either way, something has to be implemented for it to work. – BoltClock Dec 11 '14 at 09:35
  • The term "implementation" in this case is synonymous with "support". If a feature is supported in a browser, that means the browser ships with a compliant implementation of that feature. The question is asking how exactly this implementation is done, but as mentioned in the comments above this can only be answered by looking at the source, and it varies from implementation to implementation. – BoltClock Dec 11 '14 at 09:45
  • The preceding comments pertain to an answer that I've since rescinded in order to directly respond to the question being asked, a question that is probably more suitable for another forum than SO. However, the question intrigued me, so what I provide above is a superior technical answer that will hopefully spur others to look at the source code of other layout engines. – slevy1 Dec 11 '14 at 20:33
  • Thank you for updating your answer. – BoltClock Dec 12 '14 at 03:51