From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/css/_colon_hover/index.html | 178 +++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 files/ca/web/css/_colon_hover/index.html (limited to 'files/ca/web/css/_colon_hover') diff --git a/files/ca/web/css/_colon_hover/index.html b/files/ca/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..7d6cf260d5 --- /dev/null +++ b/files/ca/web/css/_colon_hover/index.html @@ -0,0 +1,178 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:hover' +--- +
{{ CSSRef }}
+ +

La pseudo-class CSS :hover coincideix quan l'usuari interactua amb un element amb un dispositiu apuntador, però no necessàriament ho activa. Generalment s'activa quan l'usuari es desplaça sobre un element amb el cursor (punter de ratolí).

+ +
/* Selecciona qualsevol element <a> quan "es deplaça" */
+a:hover {
+  color: orange;
+}
+ +

Els estils definits per la pseudo-class :active seran anul·lats per qualsevol pseudo-class subsegüent relacionada amb l'enllaç ({{ cssxref(":link") }}, {{ cssxref(":visited") }} o {{ cssxref(":active") }}) que tinguin almenys la mateixa especificitat. Per donar estil els enllaços adequadament, poseu la regla :hover després de les regles :link i :visited però abans d'una regla :active segons el definit per l'ordre LVHA: :link — :visited — :hover — :active.

+ +
Nota: La pseudo-class :hover és problemàtica en les pantalles tàctils. Depenent del navegador, la pseudo-class :hover pot ser que mai coincideixi, només coincidir per un moment després de tocar un element o bé continuarà coincidint fins i tot després que l'usuari hagi deixat de tocar i fins que l'usuari toqui un altre element. Els desenvolupadors web han d'assegurar-se que el contingut sigui accessible en dispositius amb capacitats de desplaçaments limitats o inexistents.
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple bàsic

+ +

HTML

+ +
<a href="#">Try hovering over this link.</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

Resultat

+ +

{{EmbedLiveSample("Basic_example")}}

+ +

Galeria d'imatges

+ +

Podeu utilitzar la pseudo-class :hover per construir una galeria d'imatges amb imatges en grandària real que es mostrin només quan el ratolí es mogui sobre una miniatura. Vegeu aquesta demostració per a un possible exemple.

+ +
Nota: Per a un efecte anàleg, però basat en la pseudo-class :checked (aplicada a les caixes de ràdio (radioboxes) ocultes), vegeu aquesta demostració , presa de la pàgina de referència :checked.
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}{{ Spec2('CSS4 Selectors') }}Es permet a :hover ser aplicat a qualsevol pseudo-element.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}Cap canvi significatiu .
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Definició inicial.
+ + + +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
per elements <a>0.2{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.0) }}4.04.02.0.4 (419)
+ various bugs before
per a tots els elements0.2{{CompatVersionUnknown}}{{ CompatGeckoDesktop(1.0) }}7.0[1][2]7.02.0.4 (419)
+ various bugs before
per pseudo-element{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(28) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}[3]
+
+ +

[1] En IE8-11, en passar per sobre d'un element i després desplaçar-se cap amunt/cap baix sense moure el punter, deixarà l'element en estat :hover fins que es mogui el punter. Veure IE bug 926665.

+ +

[2] En IE9 (i possiblement abans), si un {{HTMLElement("table")}} té un pare amb un no-auto {{cssxref("width")}} i {{cssxref("overflow-x")}}: auto;, i {{HTMLElement("table")}} té prou contingut per desbordar horitzontalment el seu pare i si hi ha estils {{cssxref(":hover")}} establerts en elements de la taula i, a continuació, passen per sobre d'aquests elements faran que augmenti l'alçada de {{HTMLElement("table")}}. Aquí hi ha una demostració en viu que activa l'error. Una solució provisional per a l'errada és establir min-height: 0%; en l'element pare de la taula (i la unitat % ha de ser especificada; 0 i 0px no funcionen). Hi va haver un error creat com jQuery ticket #10854, però s'ha tancat perquè no es considera un error de jQuery.

+ +

[3] A partir de Safari Mobile per a iOS 7.1.2, en tocar un element que es pot fer clic  fa que l'element entri en l'estat :hover. L'element romandrà a l'estat :hover fins que un element diferent hagi entrat en l'estat :hover.

+ +

Vegeu també

+ + -- cgit v1.2.3-54-g00ecf