[inne][JavaScript][CSS]Zmiana zawartości i stylu diva po najechaniu myszką Opcje

[kirkowa]

Dzień dobry!

To przede wszystkim, bo jestem nowa. Więc raz jeszcze: dzień dobry (IMG:style_emoticons/default/smile.gif) Dla porządku zaznaczę również, że moja znajomość tworzenia stron ogranicza się do absolutnych podstaw. Mój problem pewnie dla wielu z Was będzie idiotyczny, ale niestety na forum jest tylko "przedszkole", "żłobka" czy "oddziału dla noworodków" nie ma, więc piszę tu.

Sedno sprawy:
Mam dokładnie sześć divów na stronie. Są identyczne pod względem stylu, mają przypisaną klasę, cssa na kolorki, wszystko pięknie. Chciałabym, by po najechaniu myszką na pojedynczego diva zmieniała się jego treść i styl, żeby w "nowej" treści diva użytkownik mógł sobie kliknąć w linka. Co więcej, ideałem by było, gdyby przejście między pierwszą a drugą treścią było łagodne, jak przy zastosowaniu transition w cssie. I tu pojawia się problem. Kompletnie nie wiem, jak się do tego zabrać, czego szukać... Wujek gógle powiedział mi tyle, że sobie mogę kolor zmienić, a za to podziękuję, bo nie o to chodzi. Javascript? Ok, chętnie nawet, ale znów - nawet nie wiem, jak się do tego zabrać. Z tego, co udało mi się do tej pory dowiedzieć, to pomogłaby funkcja w javascript i onmouseover, ale właśnie - co, gdzie i jak?
Absolutnie nie oczekuję gotowca, a jedynie wyznaczenia drogi i opisania rozwiązania językim dla inteligentnych inaczej, żeby udało mi się to wszystko choć w połowie zrozumieć. Zaznaczę też, że cssa, htmla ogarniam całkiem nieźle, php prawie i absolutnie podstawowo, javascript wiem, że istnieje.

Poszukałam odpowiedzi i na Waszym forum, ale nie znalazłam tego, o co mi chodzi.

Proszę o wyrozumiałość i pozdrawiam serdecznie.

[kirkowa]

Chętnie skorzystałabym z porady mitorskiego, ale nie rozumiem (jeszcze), jak mam tego użyć, więc może, tak jak prosił Pyton, napiszę, o co dokładnie mi chodzi.

Mam diva (a dokładniej sześć, w każdym jedno słowo):

<div class="box">
cokolwiek
</div>

Ten div bez najeżdżania myszką wygląda tak:

.box {
width: 200px;
height: 200px;
margin: 5px;
background: #f0f0f0;
float: left;
text-transform: uppercase;
line-height: 195px;
text-align: center;
}

Po najechaniu myszką ma być w tym divie to:

<div class="box2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis erat gravida pulvinar facilisis. Quisque vitae fermentum felis.
<br><br>
<a href="link">więcej >></a>
</div>

I wyglądać tak:

.box2 {
width: 200px;
height: 200px;
margin: 5px;
background: #55315d;
float: left;
color: #ffffff;
}

Przy czym przejście między pierwszym a drugim ma być łagodne, takie, jakie się robi samym cssem używając transition. Ale samym cssem to się nie da, to nawet ja już wiem.

Na stronie poza tymi divami nie ma nic i nie będzie, poza kodowaniem znaków, dlatego nie wklejam całości. Ach, i jeszcze font, ale to tam mało istotne. W każdym razie - nie mam pojęcia, co dalej. Podesłałabym przykład, o co mi chodzi, ale, jak na złość, nie mogę nic znaleźć.

Ten post edytował kirkowa 28.06.2014, 23:41:54