Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Zmiana diva po najechaniu na tytuł
Forum PHP.pl > Forum > Przedszkole
Micchaleq
Witam serdecznie,

Mam pewien problem, głowie się już trochę nad tym i nie moge sobie do końca poradzić.

struktura mojego problemu wygląda tak :

  1. <li>
  2. <h3>1. Ikony</h3>
  3. <div class="img"></div>
  4. <div class="desc">opis</div>
  5. </li>


i teraz chciałbym aby po najechaniu na h3 klasa desc się zmieniła.

Da się to zrobić na samym CSS-ie ?
markonix
  1. h3 div.desc {
  2. // domyślny wygląd
  3. }
  4.  
  5. h3:hover div.desc {
  6. // po najechaniu (zamiast zmiany klasy to po prostu styl)
  7. }


Może tak?
Micchaleq
Największy tutaj problem jest taki, że desc nie znajduje się wewnątrz h3 więc powyższe style nie działają. Natomiast z drugiej strony nie chciałbym aby było to po li:hover ponieważ jeden z obrazków klasy img będzie miał również element hover.
markonix
Cytat(Micchaleq @ 22.07.2012, 14:05:51 ) *
Największy tutaj problem jest taki, że desc nie znajduje się wewnątrz h3 więc powyższe style nie działają


Faktycznie nie zauważyłem, sorki.
Tak to niestety przychodzi mi jQuery, w czystym css bez relacji rodzic/dziecko będzie ciężko.
toaspzoo
  1. <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  2. <li>
  3. <h3 onmouseover="changeclass()">1. Ikony</h3>
  4. <div class="img"></div>
  5. <div id="desc" class="desc">opis</div>
  6. </li>


"w" Jquery
[JAVASCRIPT] pobierz, plaintext
  1. function changeclass()
  2. {
  3. $("#desc").attr("class", "inna_klasa");
  4. }
[JAVASCRIPT] pobierz, plaintext



można też nadać css

[JAVASCRIPT] pobierz, plaintext
  1. $("#desc").css({ 'color': 'red', 'text-decoration':'underline'});
[JAVASCRIPT] pobierz, plaintext



Pozdrawiam
Micchaleq
Tzn Jquery ani nic poza CSS-em mnie nie interesuje, ponieważ na różne sposoby potrafił bym to rozwiązać. W css-ie nie mogę właśnie znaleźć żadnej relacji dziecko - rodzic.
lobopol
coś w ten deseń bez zmiany klasy, ale możesz podmienić style
  1. h3:hover + div {
  2. color: red;
  3. }
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.