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

Moi Drodzy!

Dziękuję za odpowiedzi. Podejrzewam, że innym na pewno się przydadzą. Mi, niestety, niekoniecznie - moja wiedza jest zbyt ograniczona, by skorzystać z tych rad. Jednak dzięki dobrej radzie i wskazaniu drogi udało mi się w końcu mój problem rozwiązać. Poniżej zamieszczam coś, co u mnie działa tak, jak chcę, aby kto inny, z podobnym poziomem zaawansowania, mógł kiedyś skorzystać:

[HTML] pobierz, plaintext 
<div class="box">
cokolwiek
</div>
<div class="second">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. <br><Br><a href=""> więcej >></a>
</div>
[HTML] pobierz, plaintext 

i CSS do tego, okrojony z kolorów dla porządku:

[CSS] pobierz, plaintext 
.box {
width: 200px;
height: 200px;
margin: 5px;
}
 
.second {
width: 200px;
height: 200px;
margin-left: -205px;
margin-top: 5px;
opacity: 0;
transition: opacity 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
 
.second:hover {
opacity: 1;
}
[CSS] pobierz, plaintext