Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML]Zwrotne oddziaływanie w kaskadowości CSS
divx_divine
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.10.2011

Ostrzeżenie: (0%)
-----


Witam. Mam pewien oto przypadek:

  1. <div id="header">
  2. <div id="nav">
  3. <ul>
  4. <li>punkt 1</li>
  5. <li>punkt 1</li>
  6. <li>punkt 3</li>
  7. </ul>
  8. </div>
  9. </div>


Chcę, aby po najechaniu na 1 punkt w liście zmieniła się wysokość headera, ale nie mam pojęcia jak oddziałowywać zwrotnie w kaskadowości CSS. Proszę o pomoc.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi (1 - 6)
Sephirus
post
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----


Obawiam się, że to działa w jedną stronę - i nie jest to kaskadowość a bardziej dziedziczenie - kaskadowość w CSS oznacza coś innego. Jedyne IMHO rozwiązanie to JS, dla ułatwienia proponuję jQuery:

[JAVASCRIPT] pobierz, plaintext
  1. $('#nav li:first').mouseover(function () {$('#header').css('height','100px');});
  2. $('#nav li:first').mouseout(function () {$('#header').css('height','50px');});
[JAVASCRIPT] pobierz, plaintext


Czy jakoś tak wink.gif

EDIT: błąd

Ten post edytował Sephirus 19.11.2012, 16:34:47


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
kamil4u
post
Post #3





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----


W CSS też się da, ale... tylko w CSS4, czyli w skrócie na dzień dzisiejszy się nie da. Ale warto wiedzieć, ze gdy przyjdzie Ci to zrobić za kilka lat coś takiego już będzie.

Do poczytania: http://dev.w3.org/csswg/selectors4/


--------------------
Go to the top of the page
+Quote Post
gr56
post
Post #4





Grupa: Zarejestrowani
Postów: 77
Pomógł: 15
Dołączył: 19.11.2011

Ostrzeżenie: (0%)
-----


Cytat(kamil4u @ 19.11.2012, 17:57:00 ) *
W CSS też się da, ale... tylko w CSS4, czyli w skrócie na dzień dzisiejszy się nie da. Ale warto wiedzieć, ze gdy przyjdzie Ci to zrobić za kilka lat coś takiego już będzie.

Do poczytania: http://dev.w3.org/csswg/selectors4/

Nie ma i nie będzie czegoś takiego jak CSS4. Wszystko po CSS 2.1 nazywa się CSS3.
Go to the top of the page
+Quote Post
kamil4u
post
Post #5





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----


Cytat
Nie ma i nie będzie czegoś takiego jak CSS4. Wszystko po CSS 2.1 nazywa się CSS3.

Niby dlaczego ma nie być? Skąd te informacje? Logiczne jest, że numeracja idzie w górę i po pewnym czasie raczej na pewno zobaczymy CSS4. Poza tym to akademicka dyskusja.


--------------------
Go to the top of the page
+Quote Post
gr56
post
Post #6





Grupa: Zarejestrowani
Postów: 77
Pomógł: 15
Dołączył: 19.11.2011

Ostrzeżenie: (0%)
-----


Cytat(kamil4u @ 19.11.2012, 22:16:16 ) *
Niby dlaczego ma nie być? Skąd te informacje? Logiczne jest, że numeracja idzie w górę i po pewnym czasie raczej na pewno zobaczymy CSS4. Poza tym to akademicka dyskusja.

http://www.xanthir.com/b4Ko0
W skrócie: każdy moduł css ma osobną numeracje wersji i nie będzie zmiany wersji całego css.
Go to the top of the page
+Quote Post
divx_divine
post
Post #7





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 30.10.2011

Ostrzeżenie: (0%)
-----


Cytat(Sephirus @ 19.11.2012, 16:33:55 ) *
Obawiam się, że to działa w jedną stronę - i nie jest to kaskadowość a bardziej dziedziczenie - kaskadowość w CSS oznacza coś innego. Jedyne IMHO rozwiązanie to JS, dla ułatwienia proponuję jQuery:

[JAVASCRIPT] pobierz, plaintext
  1. $('#nav li:first').mouseover(function () {$('#header').css('height','100px');});
  2. $('#nav li:first').mouseout(function () {$('#header').css('height','50px');});
[JAVASCRIPT] pobierz, plaintext


Czy jakoś tak wink.gif

EDIT: błąd

W takim razie jak umieścić ten kod i czy mógłby ktoś wyjaśnić jak on dokładnie działa.

@edit
Okej, wszystko już zrozumiałem. Mam teraz tylko problem by oddziaływać wyłącznie na te li, które pod sobą mają jeszcze ul.

Ten post edytował divx_divine 13.01.2013, 20:46:11
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 20.08.2025 - 17:26