CSS (Cascading Style Sheets)

 skriv ut »

En Hover-effekt är när muspekaren placeras över en bild, text, länk, DIV eller annat objekt och statusen ändras för objektet. Hover-effekter kallas ibland också för OnMouseOver eller Rollover och tidigare användes Javascript.

I exemplen nedan används CSS och pseudo-classen :HOVER för att ange vad som ska ske när muspekaren förs över ett objekt.

Elementet OPACITY används för att ange om ett objekt ska vara synligt eller inte i startläget.

Hover med text

Exempel1 visar en DIV med text och tonar ned visningen av bilden.

Exempel 2 visar en heltäckande DIV med text över bilden.

Exempel 1

Vy över Gävle Strand med Fullriggaren som innehåller bostäder, restaurang, vårdcentral, snabbköp mm. Området utvecklas kontinuerligt och ger en närkontakt med havet. Områdets namn var tidigare Alderholmen.

Exempel 2

Vy över Gävle Strand med Fullriggaren som innehåller bostäder, restaurang, vårdcentral, snabbköp mm. Området utvecklas kontinuerligt och ger en närkontakt med havet. Områdets namn var tidigare Alderholmen.

Hover med bild

En hover-bild visas och både startbilden och hover-bilden tonas in/ut.

Hover med bild och text

En hover-bild med text visas och både startbilden och hover-bilden med texter tonas in/ut.

Vy över Gävle Strand med Fullriggaren som innehåller bostäder, restaurang, vårdcentral, snabbköp mm. Området utvecklas kontinuerligt och ger en närkontakt med havet. Områdets namn var tidigare Alderholmen.

Volkswagen Bubbla Cabriolet fotograferad på Karpathos i Grekland.

Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!