Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Podmiana obrazka po najechaniu myszką
Forum PHP.pl > Forum > Przedszkole
northwest
Witam serdecznie,
Mam taki formularz:
  1. <form action="kontakt.html" method="post">
  2. <label>&nbsp;Imię i Nazwisko:</label>
  3. <input type="text" value="" name="imie"/>
  4. <label>&nbsp;Firma:</label>
  5. <input type="text" value="" name="nazwisko"/>
  6. <label>&nbsp;Telefon:</label>
  7. <input type="text" value="" name="telefon"/>
  8. <label>&nbsp;E-mail:</label>
  9. <input type="text" value="" name="kontakt"/>
  10. <label style="position:relative; left:10px; ">
  11. <label>&nbsp;Wiadomość:</label>
  12. <textarea name="tresc" style="position:relative;left:9px; width:421px;height: 207px;top:-3px"></textarea>
  13. <button type="submit" value="" class="zapiszz333"/>
  14. </form>


i do tego kod CSS:
  1. button.zapiszz333{
  2. display: block;
  3. width: 87px;
  4. height: 35px;
  5. background-image: url(images/sender.png);
  6. overflow: hidden;
  7.  
  8. cursor: pointer;
  9. margin:1px -15px -0px 270px;
  10. }
  11. button.zapiszz333:hover{
  12. display: block;
  13. width: 87px;
  14. height: 35px;
  15. background-image: url(images/sender.png);
  16. overflow: hidden;
  17. margin-left: -60px;
  18. cursor: pointer;
  19. margin:1px -15px -0px 270px;
  20. }

obrazek wygląda tak:


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??sad.gif

North
Sephirus
Hmm z tego co widzę to po najechaniu ustawiasz ten sam plik graficzny co bez smile.gif

A jeśli jest to sprite... czyli jeden obrazek z dwoma guzikami to dodaj do :hover coś takiego:

  1. background-position:top right;
Damonsson
Nie margin-left: -60px

a:

background-image: url(images/sender.png) -60px 0px;
northwest
nie działa za bardzo... delikatnie się przesuwa w lewo, ale tak dosłownie o parę pixeli... sad.gif

zrobiłem coś takiego (prawie działa, teraz lekko obrazek przeskakuje na bok, gdyby bardziej to byłoby ok):
  1. button.zapiszz333{
  2. display: block;
  3. width: 87px;
  4. height: 35px;
  5. background-image: url(images/sender.png);
  6. overflow: hidden;
  7.  
  8. cursor: pointer;
  9. margin:1px -15px -0px 270px;
  10. }
  11. button.zapiszz333:hover{
  12. display: block;
  13. width: 87px;
  14. height: 35px;
  15. background-image: url(images/sender.png)260px 0px;;
  16. background-position:top right;
  17. overflow: hidden;
  18.  
  19. cursor: pointer;
  20. margin:1px -15px -0px 270px;
  21. }



wiecie moze dlaczego?
crocodillo
  1. button.zapiszz333:hover{
  2. background-position:-60px 0px;
  3. }


(ps. przy :hover nie musisz powtarzać wszystkich stylów, tylko to co chcesz zmienić)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.