[CSS]Podmiana obrazka po najechaniu myszką

Dla specjalistów Webmastering
#1

Witam serdecznie,

Mam taki formularz:

 Imię i Nazwisko:

 Firma:

 Telefon:

 E-mail:


 Wiadomość:

i do tego kod CSS:

button.zapiszz333{

    display: block;

    width: 87px;

    height: 35px;

    background-image: url(images/sender.png); 

    overflow: hidden;


    cursor: pointer;

    margin:1px -15px -0px 270px;

}

button.zapiszz333:hover{

    display: block;

    width: 87px;

    height: 35px;

    background-image: url(images/sender.png); 

    overflow: hidden;

     margin-left: -60px;

    cursor: pointer;

    margin:1px -15px -0px 270px;

}

obrazek wygląda tak:

sender.png

Chciałbym żeby po najechaniu myszką była widoczna wersja podświetlona napisu,a momencie gdy nie jest - to bez podświetlenia…

Wie ktoś może co robię nie tak??:frowning:

North

#2

button nie posiada właściwości hover.

hover jest dla hiperłaczy czyli tagu a.

albo użyjesz onmouseover js albo zamiast buttona przerobisz to na hiperlink który wygląda jak button.

http://inspectelement.com/tutorials/cre … s-sprites/

#3

Nie masz racji, hover jest dla prawie wszystkich elementów :wink:

To będzie coś w tym stylu

button.zapiszz333 { display:block; width:90px; height:35px; background:url(http://stepby.pl/veyronek/images/sender.png) no-repeat; }

button.zapiszz333:hover { background:url(http://stepby.pl/veyronek/images/sender.png) no-repeat -90px top; }
#4

zrobiłem coś takiego (prawie działa, teraz lekko obrazek przeskakuje na bok, gdyby bardziej to byłoby ok):

button.zapiszz333{

    display: block;

    width: 87px;

    height: 35px;

    background-image: url(images/sender.png); 

    overflow: hidden;


    cursor: pointer;

    margin:1px -15px -0px 270px;

}

button.zapiszz333:hover{

    display: block;

    width: 87px;

    height: 35px;

    background-image: url(images/sender.png)260px 0px;;

        background-position:top right;

    overflow: hidden;


    cursor: pointer;

    margin:1px -15px -0px 270px;

}

wiecie moze dlaczego?

#5