Hovertillstånd

Hovertillstånd är det visuella tillstånd som ett gränssnittselement antar när användaren pekar med musen eller pekplattan över det. Syftet är att ge visuell återkoppling eller avslöja ytterligare funktioner, som att höja ett element, ändra färg, visa en tooltip eller visa en undermeny.

I webbdesign implementeras hover främst med CSS :hover och kompletterande stilar som uppträder när pekaren är över elementet. Vanliga tillämpningar inkluderar länkar som färgas om, knappar som får en ljusare kant, eller menyer som visas när man hovrar över en menyknapp. På grund av att hover är kopplat till pekdon används ofta kombinationer med :focus och andra tillstånd för att stödja tangentbordsnavigation.

Plattformar och enheter påverkar hur hovertillstånd upplevs. På stationära datorer och laptops fungerar hover naturligt, men på touchbaserade enheter finns ingen muspekare, så hover-responser anpassas ofta eller ersätts av klick/tapp eller fokusbaserad öppning. För att begränsa missförstånd används ibland media queries som: (hover: hover) för att endast tillämpa hover-stilar där pek- och musenheter stöder det.

Design och användbarhet: hover används ofta för att signalera att ett element är interaktivt, visa korta verktygstips eller ge snabb åtkomst till dolda alternativ. Men det är viktigt att inte förlita sig på hover som enda sätt att avslöja viktig information, särskilt ur ett tillgänglighetsperspektiv.

Tillgänglighet: se till att innehåll är tillgängligt även utan hover, implementera tydliga fokus-stilar för tangentbordsanvändare och undvik att helt dölja funktioner bakom hover.