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

[Pyton_000]

Witaj na forum.

A teraz pokaż co już masz i z czym dokładnie masz problem

[tzm]

onmouseover albo hover().

http://api.jquery.com/hover/

[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

[kpt_lucek]

Ja bym to zrobił mniej więcej tak:

[HTML] pobierz, plaintext 
<div class="box">
  <div class="first">cokolwiek</div>
  <div class="second" style="display:none">
       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>
</div>
[HTML] pobierz, plaintext 

I dopiero tutaj bawiłbym się w hovery, mouseentery/outy etc. - pokazywanie i ukrywanie naprzemiennie div'ów z klasami .first i .second na hover w .box

Ten post edytował kpt_lucek 29.06.2014, 03:40:51

[Pyton_000]

coś w ten deseń:
http://jsfiddle.net/jCHD7/

[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