[CSS] Zmiana diva po najechaniu na tytuł Opcje

[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 :

[HTML] pobierz, plaintext 
                                    <li>
                                        <h3>1. Ikony</h3>
                                        <div class="img"></div>
                                        <div class="desc">opis</div>
                                    </li>
[HTML] pobierz, plaintext 

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

Da się to zrobić na samym CSS-ie ?

[markonix]

[HTML] pobierz, plaintext 
h3 div.desc {
// domyślny wygląd
}
 
h3:hover div.desc {
// po najechaniu (zamiast zmiany klasy to po prostu styl)
}
[HTML] pobierz, plaintext 

Może tak?

Ten post edytował markonix 22.07.2012, 13:03:46

[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.

Ten post edytował Micchaleq 22.07.2012, 13:07:25

[markonix]

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]

[HTML] pobierz, plaintext 
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  <li>
                                        <h3 onmouseover="changeclass()">1. Ikony</h3>
                                        <div class="img"></div>
                                        <div id="desc" class="desc">opis</div>
                                    </li>
[HTML] pobierz, plaintext 

"w" Jquery

[JAVASCRIPT] pobierz, plaintext 
function changeclass()
{
$("#desc").attr("class", "inna_klasa");
}
[JAVASCRIPT] pobierz, plaintext 

można też nadać css

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

Pozdrawiam

Ten post edytował toaspzoo 22.07.2012, 18:44:00

[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

[CSS] pobierz, plaintext 
h3:hover + div {
color: red;
}
[CSS] pobierz, plaintext 

Ten post edytował lobopol 22.07.2012, 21:00:27