Oddziaływanie elemntów na siebie

0

Witam,

Mam pewien problem.Wydaje się być prosty ale nie mam pomysłu jak to zrobić:)

Mam dwa elemty nawigacji.Pionowy słupek a w nim strzałka.Te dwa elementy maja efekt hover.Słupek(po najechaniu się pojawia)strzałka(się przesuwa).Chce aby nie było tak że musze najechac na słupek i potem na strzałke jak to jest do tej pory żeby wszystko zadziałało tylko chce żeby po najechaniu na słupek zadziałał tez efekt hover strzałki(połączyć te dwa elementy czy jakoś tak) :D.Dodam że to ma być link do następnej strony czyli raczej w "href"..

Dodaje kod jak i również screeny

<div class="skate_film_previous_block_left" href="#" >
<div class="skate_film_previous"></div></div>
.skate_film_previous_block_left
{
  float: left;
  width:60px;
  height: 100%;}
  .skate_film_previous_block_left:hover{
    float: left;
  width:70px;
  height: 100%;
  background: #c5c5c3;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.skate_film_previous{
  margin-left: 10px;
  width: 70px;
  height: 70px;
  background: url(../images/arrow_left.png);
  margin-top: 250px;
}
.skate_film_previous:hover{
  width: 70px;
  height: 70px;
  margin-left: -10px;
  background: url(../images/arrow_left.png);
  margin-top: 250px;
  -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

Proszę o pomoc

Pozdrawiam

0

Umieść te elementy w jednym divie i tylko jego hover określaj w css..

0

ale w jednym znaczy usunąć jeden div i w jednym wszystko z hover czy w jednym znaczy do tego stworzyć nowego diva i umiescic te dwa wewnątrz tego jednego?

0

Stworzyć nowego.

Bo założyłem, że nie możesz ich połączyć w jednego diva albo z któregoś zrobić img.

0

Troche nad tym posiedzialem.Ale nie mam pomyslu dalej jak to polaczyć.Wiem ze ma byc taka kombinacja


<div class="glowny">
        <div class="1"></div>
        <div class="2"></div>
</div>

i teraz nie wiem jak to zrobic w css :( tzn. pewnie jakbys mi pokazal to bym skumał i by było ("aaaaaaaaa....") :D

0
.glowny:hover > .1 {...}
.glowny:hover > .2 {...}
0

ta strzałka ">" tak na logike oznacza że wchodze do wewnątrz jakiegoś diva..:) a czy bez tej strzałki może też być bo widzialem że też się tak oznacza np.

.jakas_klasa img{...}

a bez strzalki tak czy moze byc i jaka jest roznica?

```css
.glowny:hover .1 {...}
.glowny:hover .2 {...}

Z góry dzięki za pomoc :))

1

W tym wypadku może być i to i to.

Strzałka oznacza relację rodzic - dziecko. Brak strzałki oznacza wszystkich potomków (także na niższych poziomach drzewa niż dzieci).
http://www.w3schools.com/cssref/css_selectors.asp

0

a co oznacza taki wpis w html?

<div class=movie></div>

a dokładniej to "=" ?

czym się różni od

<div class="movie"></div>
1

Tym, że w pierwszej wersji ktoś zapomniał napisać cudzysłowów albo apostrofów. Jest to wersja niepoprawna, ale przeglądarki starają się jednak odgadnąć o co chodziło.

0

wszystko ładnie działa ale niestety jest jedno "ale"

Mianowicie mam taka budowę podstrony:

 
<div id="zero">
      <div class="popup-overlay">
         <div class="skate_film_nawigacja">
              <a href="paul.php" class="skate_film_previous_block_left" >
                 <div class="skate_film_previous"></div>  
              </a>                                                                  
         </div>                                                                             
         <div class="skate_film_nawigacja2">
            <a href="paul2.php" class="skate_film_next_block_right">                                                                                
               <div class="skate_film_next"></div>
            </a>                                                                         
         </div>                                                                           
        <div class="popup-exit"></div>		
                                                                                        
          <iframe  src="https://www.youtube.com/embed/13prv80gmiM" frameborder="0" allowfullscreen class="skate_film_iframe"></iframe>
          <div class="skate_film_page">1/12</div>
     </div>
</div>
.skate_film_nawigacja{width: 30px;
height:100%;
float: left;
}
.skate_film_previous_block_left
{
  float: left;
  width:60px;
  height: 100%;}
  .skate_film_nawigacja:hover .skate_film_previous_block_left{
  width:70px;
  height: 100%;
  background: #c5c5c3;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.skate_film_previous{
  margin-left: 20px;
  width: 60px;
  height: 70px;
  background: url(../images/arrow_left.png);
 margin-top: 250px;
}
.skate_film_nawigacja:hover .skate_film_previous{
  width: 70px;
  height: 70px;
  margin-left: -10px;
  background: url(../images/arrow_left.png);
  -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;

}
.skate_film_nawigacja2{width: 30px;
height:100%;
float: right;
}
.skate_film_next_block_right
{float: right;
  width:60px;
  height: 100%;
  }
  .skate_film_nawigacja2:hover .skate_film_next_block_right{
  width:70px;
  height: 100%;
  background: #c5c5c3;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.skate_film_next{
margin-left: -30px;
  width: 60px;
  height: 70px;
  background: url(../images/arrow_right.png);
  margin-top: 250px;
}
.skate_film_nawigacja2:hover .skate_film_next{
  width: 70px;
  height: 70px;
  margin-left: 10px;
  background: url(../images/arrow_right.png);
  margin-top: 250px;
  -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;}
} 

Moje pytanie brzmi.Czemu skoro podlinkowałem button ( "skate_film_previous_block_left" i "skate_film_next_block_right")nie przekierowuje mnie do danej strony tylko w lewym dolnym rogu pokazuje mi sie tylko i wyłącznie ścieżka:)?

0

Przesyłam link do efektu buttona

0

Chodziło mi o coś, w co sam mógłbym kliknąć i zobaczyć co się tam dzieje, a nie filmik;p No ale już u siebie wkleiłem i muszę Ci powiedzieć, że:

SOA#1: U mnie działa...

Więc nie za bardzo mogę Ci pomóc naprawić coś co działa;) Spróbuj skorzystać z Narzędzia > Dla twórców witryn > konsola WWW i sprawdzić w co właściwie klikasz...

0

Próbowałem przez narzedzia web developer.Pokazywalo mi punkt z linkiem i punkt główny ktory nie byl podlinkowany.Więc zmieniłem aby byl podlinkowany i nic.Nie wiem moze to przez to ze to jest robione na dodatkowej warstwie.W sensie to co widac to nie jest podstrona tylko div z klasą.NIe mam pomysłu :)

0

Przy absolutnym braku pomysłów proponuję, żebyś udostępnił klikalną wersję:-)

0

a jak mam to zrobic:)?

0

Najlepszy rozwiązaniem byłoby wrzucenie tego na jakiś hosting i wklejenie linka...
Jeżeli przenoszenie całej strony byłoby zbyt skomplikowane lub z innych powodów nie chcesz tego robić, to możesz zrobić lokalną kopię danej podstrony i ją wrzucić (Plik -> Zapisz stronę jako powinno utworzyć taką kopię)...

0

wrzucilem na taki darmowy serwer.Zanim zaczniemy rozmawiac o tym glownym problemie moze mi ktos powiedziec dlaczego w zakladkach nie dziala php(html i style css)?bo includowalem menu i stopke.. http://meandmyhobbies.prv.pl/index.html. Tak wiem strona slaba ale sie ucze :)

0

Przycisków nie znalazłem, więc zakładam, że ich pojawienie się wymaga rozwiązania problemów z php...

Includujesz stronę razem z html etc. w efekcie uzyskujesz na stronie dwa elementy html, pewnie to dlatego...

0

Na serwerze xamp wszystko wlasnie dziala normalnie.Czy kazda strona ma być zapisana w html czy moze byc w php?Na serwerze xamp mam wszystko w php i śmiga

0

Faktycznie na indexie jest ok, ale w galerii jest tak (i o tym właśnie pisałem):

<!DOCTYPE HTML>
<html class="no-js">
<head>
...
</head>
<body>

<!DOCTYPE HTML>
<html class="no-js">
<head>
 ...
</head>
<body>
...
</body>		
0

Czyli jezeli dobrze rozumiem to do elementu includowanego mam dodać html?a muszą być tam dopisane style?

0

Nie. A przynajmniej nie wiem, bo nie wiem co tam właściwie inkludujesz i do czego. Masz zrobić tak, żeby w ostatecznym efekcie na stronie galerii nie było dwóch elementów html :-p

0

mam to wrzucić na github-a czy proponujesz cos innego ?Konkretniej chodzi mi o button.Bo co do tych plików php to to co jest includowane jest a to wlasnie co jest w czystym html (nie ma).

1 użytkowników online, w tym zalogowanych: 0, gości: 1