Háttérkép megváltoztatása mikor fölé visszük az egeret

Ebben a példában megmutatjuk, hogyan lehet egyszerűen egy elem hátterét megváltoztatni, amikor fölé megyünk az egérrel

Ehhez szükségünk van HTML-re, CSS-re. A HTML teszi ki az elemeinket, a CSS segítségével designt adunk neki.

A feladat elvégzéséhez a hover parancsra van szükségünk

A HOVER használata

A használata nagyon egyszerű, veszünk egy selectort, és utána írjuk: ":hover"

    // egy elem kiválasztása
    a:hover
    {
    }

    // egy elem adott osztállyal
    div.class-name:hover
    {
    }


        

Az elem kiválasztása után, a background, background-image, vagy background-color parancsokkal tudunk hatni a háttérre.

Mivel mi háttérképet akarunk változtatni ezért a background vagy a background-image parancsokat kell használnunk.

A parancs használatához szükségünk van egy kép teljes elérési útvonalára, pl: http://www.wannacode.com/upload/courses/categories/php/example_php-category.jpg.

Az adott címet beállítjuk az url érték segítségével:

    div.css-change-background-hover:hover
    {
        background-image: url( "http://www.wannacode.com/upload/courses/categories/php/example_php-category.jpg" )
    }


    

Ezt a kis CSS kódot felhasználva ki is próbálhatjuk az alábbi elem segítségével:

Fontos megjegyezni, hogy az adott háttérből mindig az elem méretétől függően fog látszani egy adott rész