CSS method of closing CSS :hover on touch devices (2013)

Note, October 2013: For Android I only tested this in the emulator and the stock browser. Strangely enough it seems to work as intended in Android 2.3, but not anymore in Android 4.3. Tests in real devices would be appreciated.

Most if not all browsers on touch devices recognize a touch as a :hover in certain circumstances.
It's well documented, in short, if there is a content change on hover, the touch will not act as a click, but as a hover on the first touch.
There is the speciality that this only done if there is a link directly inside the hovered element.
So using the pseudo-class :hover to show additional content works, with one limitation: The :hover state stays until another element with :hover and link, or another link is touched.
That is because the :hover gets triggered by a touch and there is no trigger for a mouseout. This of course is not ideal, as there should be a way to get back to the original state in an intuitive way.

You could solve this problem with Javascript, but I personally like to keep functionalities in one place if possible, so if you opened something by the CSS :hover method, it should be closed in the same way if possible.

So I wrote a CSS solution to reverse the :hover state if you touch anywhere else on the page:
additionally to the element you show with the :hover, you make another link (with href="#") available.
With z-index this additional element is set behind the content you opened, but above the rest of the page. If the user now clicks anywhere else on the page than in the visibly opened element, the element closes again.

Working Example - on desktop, there is no difference in behaviour

Example html

<div class="hovertrigger">
  <a href="./index.php">Link</a>
  <div>The element to be shown or hidden</div>
</div>
<a href="#" class="touch-shut">This is the trigger for closing again</a>
					

The CSS to it would look like this (this is only the CSS to make it work):

/* prepare for z-index */
 .hovertrigger {position: relative;}

/* the element to be shown by :hover */
 .hovertrigger div {display: none; z-index: 2;}
 .hovertrigger:hover div {display: block;}

/* keep the hovered element above the close trigger */
 .hovertrigger:hover {z-index: 2;}

/* The close trigger */
 .touch-shut {position: fixed; width: 100%; height: 100%; z-index: 1; display: none; top: 0; left: 0;}
 .hovertrigger:hover ~ .touch-shut {display: block;}
					

Et voilà, whenever you touch anywhere on the page (except a link), it will just close the opened element.

As it is done with the sibling selector, you only need one extra element per block of hover-enabled elements, not one per element. So in most cases for the navigation, just one would be enough.
The whole extra code is more in the regions of bytes than Kilobytes.

As it works with z-index, you have to be careful about the stacking order and that the elements have to have a position other than static.

As the close-trigger is called in a :hover context and it changes the content, it doesn't fire as a # link (reloading the page), but only reverses the :hover state again.