49 besökare, 2 medlemmar och 1 Student är online nu
Loopia

CSS (Cascading Style Sheets)

WDS medlem (WDS member)

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

Gävle strand
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

Gävle strand
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.

Gävle strand VW Bubbla Cab

 

Hover med bild och text

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

Gävle strand
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.
VW Bubbla Cab
Volkswagen Bubbla Cabriolet fotograferad på Karpathos i Grekland.

 

 

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

WDS medlem (WDS member)

 

OBS! Om du vill du läsa hela guiden måste du vara WDS medlem!

Du kan beställa tjänsten WDS medlem här »

Är du redan WDS medlem?
Klicka på ikonen "WDS medlem" högst upp för att läsa hela guiden!