1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
---
title: ':hover'
slug: 'Web/CSS/:hover'
tags:
- CSS
- CSS Pseudoklasse
- Layout
- NeedsMobileBrowserCompatibility
- Referenz
- Web
translation_of: 'Web/CSS/:hover'
---
<p>{{ CSSRef() }}</p>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>:hover</code> CSS <a href="/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a> wird verwendet, wenn der Nutzer einen Link auswählt, auch ohne ihn zu aktivieren. Dieser Stil kann von weiteren Link-abhängigen Pseudoklassen überschrieben werden: {{ cssxref(":link") }}, {{ cssxref(":visited") }} und {{ cssxref(":active") }}. Um nur entsprechende Links auszuwählen, ist es wichtig die <code>:hover</code> Regel nach den <code>:link</code> und <code>:visited</code> Regeln, aber vor der <code>:active</code> Regel zu erwähnen, wie beschrieben in der <em>LVHA-Reihenfolge</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
<p>Die <code>:hover</code> Pseudoklasse kann auf alle <a href="/de/docs/Web/CSS/Pseudo-elements" title="Pseudo-classes">Pseudoelemente</a> angewendet werden. {{experimental_inline}}</p>
<p>Webbrowser (User-Agents) wie Firefox, Internet Explorer, Safari, Opera oder Chrome, wenden den zugehörigen Stil an, wenn der Cursor (Mauszeiger) über ein Element fährt.</p>
<div class="note"><strong>Hinweis</strong>: Auf Touchscreens ist <code>:hover</code> problematisch oder unmöglich. Abhängig vom Browser, tritt die <code>:hover</code> Pseudoklasse niemals, nur für einen kurzen Moment nach dem Berühren in Kraft oder bleibt aktiviert, auch wenn der Nutzer das Element nicht mehr berührt, bis er ein anderes Element berührt. Weil Touchscreen-Geräte oft gleich sind, ist es wichtig für Webentwickler, keinen Inhalt zu haben, der nur über die <code>:hover</code> Pseudoklasse aufrufbar ist, da es für Nutzer von solchen Geräten schwierig oder unmöglich ist, diesen Inhalt aufzurufen.</div>
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush: css">:link:hover { outline: dotted red; }
.foo:hover { background: gold; }
</pre>
<h3 id="Dropdown_Menü">Dropdown Menü</h3>
<p>Mit der <code>:hover</code> Pseudoklasse kann man komplexe Algorithmen in CSS erstellen. Dies ist eine verbreitete Methode, die genutzt wird, um beispielsweise Dropdown Menüs nur mit CSS (ohne <a href="/de/docs/Web/JavaScript" title="en/JavaScript">JavaScript</a>) zu erstellen. Die Idee dieser Methode ist das Erstellen einer Regel, wie die Folgende:</p>
<pre class="brush: css">div.menu-bar ul ul {
display: none;
}
div.menu-bar li:hover > ul {
display: block;
}
</pre>
<p>Sie kann auf folgende HTML Struktur angewendet werden:</p>
<pre class="brush: html"><div class="menu-bar">
<ul>
<li>
<a href="example.html">Menü</a>
<ul>
<li>
<a href="example.html">Link</a>
</li>
<li>
<a class="menu-nav" href="example.html">Untermenü</a>
<ul>
<li>
<a class="menu-nav" href="example.html">Untermenü</a>
<ul>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</pre>
<p>Sieh dir unser <a class="internal" href="/@api/deki/files/6238/=css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-basiertes Dropdown Menü Beispiel</a> für eine mögliche Lösung an.</p>
<h3 id="Galerie_mit_Vollbild-Bildern_und_Vorschauen">Galerie mit Vollbild-Bildern und Vorschauen</h3>
<p>Man kann die <code>:hover</code> Pseudoklasse nutzen, um eine Bildergalerie mit Vollbild-Bildern, welche nur angezeigt werden, wenn der Nutzer mit der Maus über die Vorschau fährt, zu erstellen. Sieh dir dafür <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">diese Demo </a>an.</p>
<div class="note"><strong>Hinweis:</strong> Für einen analogen Effekt, der jedoch auf der {{ cssxref(":checked") }} Pseudoklasse basiert (angewendet auf Auswahlfelder), sieh dir <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">diese Demo </a>an, übernommen von der {{ cssxref(":checked") }} Seite.</div>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Anmerkung</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>Kann auf jedes Pseudoelement angewendet werden.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Keine wesentlichen Veränderungen</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
{{Compat("css.selectors.hover")}}
<p>Siehe auch:</p>
<ul>
<li><a href="https://code.google.com/p/chromium/issues/detail?id=370155">Chromium bug #370155: Don't make <code>:hover</code> sticky on tap on sites that set a mobile viewport</a></li>
<li><a href="https://code.google.com/p/chromium/issues/detail?id=306581">Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.</a></li>
</ul>
|
