Robię przycisk w css z hover który ma być raz wciśnięty a raz nie i potrzebuję take reagowanie jak było kiedyś w html: "onclick" czy "onmouseover" .
Robię dwie grafiki przycisku w jednym png - nie wciśnięty u góry i wciśnięty na dole i pisze styl hover. Wszystko działa i po najechaniu na przycisk myszką zamienia się on na ciemniejszy. Teraz robie png odwrotny - wciśnięty przycisk u góry i nie wciśnięty na dole i pisze nowy styl do tego. Przekazywany po naciśnięciu przycisku parametr decyduje który styl jest wybrany i czy wyświetlany przycisk będzie wyświetlany jako przyciśnięty czy też nie. Ale tu mam właśnie problem gdzie przydała by mi się jakaś opcja "onmouseover" ze starego html. Otóż gdy najeżdżam na przycisk to zamienia się on na wciśnięty i tak jest dobrze ale jak go naciskam to podstrona jest przeładowywana i zmieniony styl ładuje odwrotną grafikę która powinna wyświetlać przycisk jako wciśnięty. Styl sie ładuje ale myszka nadal jest na przycisku, to jest wykrywane więc wyświetlany jest przycisk niewciśnięty. Dopiero jak zjadę myszką z przycisku to pojawia sie właściwa grafika. Gdyby reakcja przycisku ustawiona była nie na obecność myszki ale na jej najechanie to wszytko działało by mi super. Jak to zrobić?
Boże, jakie to niejasne. Najważniejsze zdanie napisałeś tak, że wyklucza się ze sobą.
Jeszcze raz.
Strona się przeładowuje, ale kursor leży już nad przyciskiem. Jest on ostylowany jako :hover czy nie?
A może wrzucisz jakiś kod online, żeby to zobaczyć?
Tak jak napisałem, strona sie przeładowuje i wszystko działa dokładnie według kodu z hover (bo drugi, załadowany styl też ma wpisany hover tylko z odwrotną grafika niz pierwszy). Problem polega na tym że po przeładowaniu strony myszka, jeżeli jej nie ruszysz, nadal jest nad przyciskiem więc wywołuje ten drugi hoover, a tego nie chcę bo to myli usera. Powinna wyświetlać się grafika przycisku właściwa dla załadowanej własnie podstrony a nie ta która będzie po naciśnieciu przycisku.
Oto kod styli ale to nie wiele da bo one działają poprawnie. Szukam jakiegoś triku który po przeładowaniu strony nie wywoła rekacji przycisku na leżącą na nim myszkę. Czyli żeby przycisk reagował tylko w trybie najeżdżania na niego.
form.sort .sort-button{
background-image: url(../images/sort_1.png);
width: 20px;
height: 20px;
border: none;
font-size: 11px;
color: #8d8b79;
text-align: center;
}
form.sort .sort-button:hover{
background-position: 0 -20px;
}
form.sort .sort-button2{
background-image: url(../images/sort_2.png);
width: 20px;
height: 20px;
border: none;
font-size: 11px;
color: #8d8b79;
text-align: center;
}
form.sort .sort-button2:hover{
background-position: 0 -20px;
}
W samym CSS to jest nie tyle niemożliwe, co zapewne zależy od implementacji przeglądarki. Z kolei javascript zawsze ładuje się z opóźnieniem, więc też nie jesteś w stanie sprawdzić, czy NA PEWNO user nie ruszył już myszą. Zaakceptuj ten stan rzeczy - tyle możesz zrobić. Ew. niech stan hover na kolejnej podstronie będzie jeszcze inny (trzeci stan, np. jeszcze mocniejsze podświetlenie) - wtedy nie masz efektu mylenia usera.
Dzięki