-
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
- Perfidne ataki krakerów z KRLD na skrypciarzy JS i Pajton
- Do sądu trafił pozew zbiorowy przeciw Google'owi - oskarżenie o praktyki monopolistyczne na rynku reklamy internetowej
- 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>
Najnowsze wątki
- 2025-06-27 Warszawa => Account Manager - Usługi rekrutacyjne <=
- 2025-06-27 Bieruń => Spedytor Międzynarodowy (handel ładunkami/prowadzenie flo
- 2025-06-27 Warszawa => Senior SAP Consultant - PP area <=
- 2025-06-27 Warszawa => Spedytor Międzynarodowy <=
- 2025-06-27 Zasilanie elektryków w Polsce
- 2025-06-27 Łódź => Programista Mainframe (z/OS, Assembler) <=
- 2025-06-27 Łódź => Mainframe (z/OS, Assembler) Developer <=
- 2025-06-27 Wrocław => Senior Android Developer (Java) <=
- 2025-06-27 Warszawa => IT Director <=
- 2025-06-27 Wrocław => Controlling systems Consultant <=
- 2025-06-27 Warszawa => Software Engineer .Net <=
- 2025-06-27 BMW
- 2025-06-26 Re: Recykling akumulatorów
- 2025-06-26 Re: Recykling akumulatorów
- 2025-06-26 Inwentaryzacja budynku