Your browser assumes that you have no mouse pointer

If you see this text, your browser sends the message that there is no mouse pointer. This means that you do not have a mouse pointer in your browser that you can move with a mouse, trackball, mouse pad or similar.

If this is not the case, contact your device manufacturer to report this incorrect setting.

Your browser assumes that you have a mouse pointer

If you see this text, your browser sends the message that a mouse pointer is present. This means that you have a mouse pointer in your browser that you can move with a mouse, trackball, mouse pad or similar.

If this is not the case, contact your device manufacturer to report this incorrect setting.

Hover example without a media query.

Hover example for browsers only with hover state HOVER.

@media (hover:hover)

Hover example for browsers only with hover state NONE.

@media (hover:none)

Background information

EN

EN

With the help of a so-called media query, CSS (the formatting language for HTML pages) can be used to respond to browsers that do not offer a mouse pointer that can be hovered over page elements. This is e.g. the case with smartphones. On smartphones, if no additional peripheral devices are connected, there is basically no mouse pointer at first, which could then be located over a certain page element. Instead, you can trigger so-called touch events with your fingers.

Developers are now trying to respond to this fact using a media query. If the browser sends a signal "I don't have a mouse pointer and therefore cannot hover", you can completely switch off the feature that would appear when hovering. However, this is annoying if the information which the browser sends is incorrect. That means I can hover but the feature is withheld because of the wrong browser settings.

I experience this myself with my Lenovo Yoga 500-15ISK. This is a convertible laptop with a 15" touch screen. I connected a mouse, keyboard and a 27" monitor to this laptop. All my browsers (Firefox, Chrome, Opera, Edge) send the wrong signal that I have no mouse pointer and therefore cannot hover.

I noticed this on the github.com website, where various features are now withheld.

DE

DE

Mithilfe eines sogenannten Media Querys kann man mit CSS (die Formatierungssprache für HTML-Seiten) auf Browser reagieren, welche keinen Mauszeiger anbieten, den man über Seitenelemente bewegen könnte (hovern). Dies ist z.B. bei Smartphones der Fall. Auf Smartphones hat man, wenn keine zusätzlichen peripheren Geräte angeschlossen sind, grundsätzlich erstmal keinen Mauszeiger, welcher sich dann über einem bestimmten Seitenelement befinden könnte. Stattdessen kann man mit seinen Fingern sogenannte Touch-Events auslösen.

Entwickler versuchen jetzt mithilfe eines Media Querys auf diesen Umstand zu reagieren. Sendet der Browser ein Signal "Ich habe keinen Mauszeiger und kann also nicht hovern", dann kann man die Feature, welche beim Hovern erscheinen würden komplett abschalten. Dies ist jedoch ärgerlich, wenn die Information, welcher der Browser sendet falsch ist. D.h. ich kann hovern, die Feature werden mir wegen der falschen Browser-Einstellung aber vorenthalten.

Ich selbst erlebe dies bei meinem Lenovo Yoga 500-15ISK. Dies ist ein Convertible Laptop mit 15" Touch-Screen. An diesen Laptop habe ich Maus, Tastatur und einen 27" Monitor angeschlossen. Alle meine Browser (Firefox, Chrome, Opera, Edge) senden das falsche Signal, dass ich keinen Mauszeiger hätte und somit nicht hovern könne.

Aufgefallen war mir dies auf den Seiten von github.com auf denen mir diverse Feature nun vorenthalten werden.

Media Query Example

/* Examples taken from github.com */

@media (hover: hover) {
  .SelectMenu-closeButton:hover,
  body:not(.intent-mouse) .SelectMenu-closeButton:focus {
    color: #24292e;
  }
  .SelectMenu-closeButton:active {
    color: #586069;
  }
  .SelectMenu-item:hover,
  body:not(.intent-mouse) .SelectMenu-item:focus {
    background-color: #f6f8fa;
  }
  .SelectMenu-item:active {
    background-color: #fafbfc;
  }
  body:not(.intent-mouse) .SelectMenu-tab:focus {
    background-color: #dbedff;
  }
  .SelectMenu-tab:hover {
    color: #24292e;
  }
  .SelectMenu-tab:not([aria-selected=true]):active {
    color: #24292e;
    background-color: #f6f8fa;
  }
}
@media (hover: none) {
  .SelectMenu-item:active,
  .SelectMenu-item:focus {
    background-color: #fafbfc;
  }
  .SelectMenu-item {
    -webkit-tap-highlight-color: rgba(209, 213, 218, .5);
  }
}
@media (hover: hover) {
  .hx_menuitem--focus {
    background-color: #fafbfc;
  }
}
@media (hover: none) {
  .tooltipped:hover:after,
  .tooltipped:hover:before {
    display: none;
  }
}
@media (hover: none) {
  .markdown-body h1 .octicon-link,
  .markdown-body h2 .octicon-link,
  .markdown-body h3 .octicon-link,
  .markdown-body h4 .octicon-link,
  .markdown-body h5 .octicon-link,
  .markdown-body h6 .octicon-link {
    visibility: visible !important;
  }
}

Leave a comment

Kommentar von Daniel |

Samsung devices report (hover:hover) instead of (hover:none) like all other mobile devices.

Antwort von Andreas Burg

Thank you for reporting. And posting this link:

Samsung devices incorrectly handle CSS @media hover queries

Bitte addieren Sie 7 und 2.