-
Data: 2011-12-15 21:40:11
Temat: Re: bacground-position problem z przesunięciem
Od: Paweł Piskorz <n...@p...nie?> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]W dniu 2011-12-15 15:43, Mateusz Krzysiak pisze:
> mam taki kod
>
> <div id="pierwszy" style="bacground-position:35px 0px">
> <div id="drugi" style="bacground-position:95px 0px">
> <div id="trzeci" style="bacground-position:135px 0px">
> <div id="czwarty" style="bacground-position:195px 0px">
> .....
> .....
> itd. do około 100 pozycji
>
> Chcę aby po najechaniu na DIV myszą tło przesunęło się w osi Y o 35px
> lecz nie modyfikowało przy tym pozycji osi X, czyli chciałbym zamienić
> 0px na 35px
Ech nie Ty jeden byś tak chciał, ale chłopaki się zatransitionowali w
animacje i takie pierdoły jak background-position-y im nie w głowie :/
Najłatwiej - podziel sobie ten obrazek na dwa i po prostu na hover
zmieniaj sam obrazek. Czyli masz teraz:
+---+---+---+ 0
| A | B | C | ta część jest widoczna normalnie
+---+---+---+ 35px
| a | b | c | tę chcesz pokazywać przy :hover
+---+---+---+
podziel to na dwa osobne pliki:
pierwszy:
+---+---+---+
| A | B | C | ta część jest widoczna normalnie
+---+---+---+
drugi:
+---+---+---+
| a | b | c | tę chcesz pokazywać przy :hover
+---+---+---+
i potem lecisz w stylach:
.ikona.A { background-position:0 0; }
.ikona.B { background-position:35px 0; }
.ikona.C { background-position:95px 0; }
i tak aż do tej setki, a na końcu:
.ikona{ background-image:url(pierwszy); }
.ikona:hover { background-image:url(drugi); }
> napisałem skrypt w jQuery:
> <script language="javascript" type="text/javascript">
Samo <script> wystarczy.
> $("#menu_top li").mouseover(function(){
> $(this).css("background-position", "+=0px 36px");
> }).mouseleave(function(){
> $(this).css("background-position", "+=0px 0px");
> });
> </script>
>
> ale to nie za bardzo chce działać
Witaj w świecie jQuery (to już bardziej pl.comp.lang.javascript, albo
pl.pregierz ;))
> może ktoś z tej grupy naprowadzić mnie na właściwe tory i podpowiedzieć
> troszkę jak mam tego dokonać.
"Na szczęście" metoda css przyjmuje jako parametr również funkcję, więc:
$(this).css("background-position",function(i,s){retu
rn s.replace( /
0px/,' 35px')});
i z powrotem:
$(this).css("background-position",function(i,s){retu
rn s.replace( /
35px/, ' 0px')});
--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}
Następne wpisy z tego wątku
- 16.12.11 10:26 Mateusz Krzysiak
Najnowsze wątki z tej grupy
- Jakie znacie działające serwery grup dyskusyjnych?
- is it live this group at news.icm.edu.pl
- php, linki z nazwami a $_GET, SEO
- www polityka pl captcha
- dyktatura brudnego palucha
- www.znanylekarz.pl
- Czy pytanie o sczytywanie stron programami/skryptami to tu?
- Grupy webdevowe
- Jak wydrukować stronę?
- IIS, kilka witryn
- linki <a href="/strona.php"> (ze slashami)
- co rozszerza stronę??
- responsywny akapit <p>
- Czy istnieje jakiś emulator przeglądarek pod Mac'a?
- taka sama konfiguracja dla localhost i produkcji
Najnowsze wątki
- 2025-01-22 Gdańsk => System Architect (Java background) <=
- 2025-01-22 Katowice => Senior Field Sales (system ERP) <=
- 2025-01-22 Warszawa => Java Developer <=
- 2025-01-22 pokolenie Z
- 2025-01-22 Wyświtlacz ramki cyfrowej
- 2025-01-22 Białystok => Architekt rozwiązań (doświadczenie w obszarze Java, A
- 2025-01-22 Chrzanów => Team Lead / Tribe Lead FrontEnd <=
- 2025-01-22 Ostrów Wielkopolski => Konsultant Wdrożeniowy Comarch XL/Optima (Ksi
- 2025-01-22 oferta na ubezpieczenie OC życie prywatne
- 2025-01-22 Bieruń => Spedytor Międzynarodowy (handel ładunkami/prowadzenie flo
- 2025-01-22 Warszawa => International Freight Forwarder <=
- 2025-01-22 Gdańsk => Specjalista ds. Sprzedaży <=
- 2025-01-21 Zgromadzenie użytkowników pojazdów :-)
- 2025-01-21 bateria na żądanie
- 2025-01-21 Warszawa => IT Business Analyst <=