Zmiana div'a poprzez najechanie na innego div'a

Chciałbym aby po najechaniu na div text-box zmieniała mi się zawartość div'a block. Używanie selektorów elementów nie daje żadnego efektu, lub po prostu źle ich używam.

<div class="main">

    <div class="block">
      <img src="photo.gif" alt="rr">
      </div>

    <div class="text-box">
      <p class="tittle-text">//MyFavoriteColorIsRain</p>
    </div>


</div>

body{
  background: #000;
}

.main{
  display: flex;
}

.text-box{
  width: 100%;
  height: 100%;
  padding-right: 20px;
  padding-top: 20px;
}

.tittle-text{
	background-color: black;
  color: white;
  font-family: consolas, sans-serif;
	text-transform: uppercase;
  text-align: right;
}

.block{
  background: #000;
  width: 640px;
  height: 425px;
  margin-left: 250px;
}

hover+~ powinno wystarczyć przeanalizuj przykład poniżej:
https://jsfiddle.net/maxshuty/cj55y33p/3/
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_attribute_value_contains

Pytanie - czy musi to być zrobione w oparciu o CSS, czy możesz sobie pomóc JavaScript'em?

czysteskarpety napisał(a):

hover+~ powinno wystarczyć przeanalizuj przykład poniżej:

Próbowałem i div block kompletnie na nic nie reaguje.

cerrato napisał(a):

Pytanie - czy musi to być zrobione w oparciu o CSS, czy możesz sobie pomóc JavaScript'em?

No najlepiej by było CSS, ale jeśli masz jakąś w miarę "łatwą" propozycję JS to pokaż a chętnie przeanalizuje sobie kod :)

Rzuć okiem na te dwa posty w innych wątkach: https://4programmers.net/Forum/1502087 oraz https://4programmers.net/Forum/1503000.
Wprawdzie nie robią one dokładnie tego, czego Ty oczekujesz, ale jak podejrzysz sobie zasadę, na jakiej działają mechanizmy tam opisane, to nie powinieneś mieć większych problemów z dostosowaniem tego do własnych potrzeb. A jakbyś próbował i jednak miał problem - daj znać, coś razem wyczarujemy :)

jeff napisał(a):

Chciałbym aby po najechaniu na div text-box zmieniała mi się zawartość div'a block.

Nie wiem, co dokładnie rozumiesz przez zmieniała mi się zawartość, ale masz:
https://jsfiddle.net/62gqh0s7/

Kolejność text-box i block w kodzie odwrotna, bo żaden aktualnie dostępny selektor CSS nie działa na rodziców elementu ani na jego wcześniej występujących braci. A dla potrzeb renderowania odwrócona na powrót przez: order.

To, co dałaś Smoku jest OK, ale mało elastyczne. Znaczy - tak naprawdę nie modyfikujesz treści dynamicznie, a jedynie pokazujesz/ukrywasz rzeczy wcześniej wpisane. Nie możesz w ten sposób dowolnie modyfikować treści osadzonej na stronie - to jedynie da się wykonać w oparciu o JavaScript i modyfikacje DOM.

Pytanie do @jeff - o co Ci konkretnie chodziło? Czy takie pokazywanie/ukrywanie treści jest wystarczające, czy chodziło Ci o możliwość pełnej manipulacji zawartością DIV?

cerrato napisał(a):

To, co dałaś Smoku jest OK, ale mało elastyczne. Znaczy - tak naprawdę nie modyfikujesz treści dynamicznie, a jedynie pokazujesz/ukrywasz rzeczy wcześniej wpisane.

Można się pobawić z: pseudoelementem ::after
https://jsfiddle.net/5pe3asuz/

Ale czy to będzie bardziej elastyczne? Wtedy nawet CSS trzeba generować zależnie od danych na stronie. No chyba, że to jakieś na sztywno ustawione elementy menu albo coś.

Można się pobawić z: pseudoelementem ::after

No tak, ale nadal mamy manipulację przez CSS, czyli pokazywanie/chowanie poszczególnych elementów, a nie ich tworzenie/modyfikowanie.

cerrato napisał(a):

Można się pobawić z: pseudoelementem ::after

No tak, ale nadal mamy manipulację przez CSS, czyli pokazywanie/chowanie poszczególnych elementów, a nie ich tworzenie/modyfikowanie.

No nie. W tym wypadku CSS dodaje do strony nowe pseudoelementy / usuwa stare.
I - co prawda - one nie są tak naprawdę dodawane do DOM, ale nie wiem, jak CSS miałby je jeszcze bardziej tworzyć :/

Może inaczej napiszę - wprawdzie dodaje, ale nie jest to tak stricte dynamicznie. Musisz sobie w CSS określić co chcesz schować/dodać/ukryć, a potem tylko możesz działać w zaplanowanym wcześniej zakresie. Nie wstawisz w ten sposób (jeśli nie mam racji to chętnie zobaczę, jak to da się zrobić i się czegoś nauczę) np. bieżącej godziny albo ilości odwiedzin od 01-01-1990 ;) Nie wiem, czy się rozumiemy - ale w mojej ocenie CSS to tylko operuje widocznością pewnych elementów, może coś dokleić w ramach ::after, ale nie pozwala na dowolność w manipulowaniu treścią <div> czy innych elementów.
Stąd pytanie do OP - o co mu konkretnie chodziło. Nie twierdzę, że to co piszesz Smoku jest złe/błędne, ale po prostu nie jestem pewien, czy @jeff o to chodziło.

• Jeśli chcesz mieć autentycznie dynamiczną treść zależną od aktualnego czasu, czy jakiegoś zestawu opcji wybranych na stronie to zostaje JavaScript.
• Jeśli wystarczy ci treść aktualizowana przy każdym odświeżeniu strony, to można posłużyć się elementami generowanymi przez PHP i selektywnie odsłanianym z pomocą CSS.
• Jeśli treść ma być zdefiniowana na sztywno (np. jakieś elementy menu) to można użyć samego CSS.

No ale my tu sobie - kolego docencie - akademicko dyskutujemy, a nasz padawan jakby zamilkł ;)

Freja Draco napisał(a):

jeff napisał(a):

Chciałbym aby po najechaniu na div text-box zmieniała mi się zawartość div'a block.

Nie wiem, co dokładnie rozumiesz przez zmieniała mi się zawartość, ale masz:
https://jsfiddle.net/62gqh0s7/

Zajebiste, o to dokładnie mi chodziło :)
Mam jeszcze pytanie, czy jest możliwość aby to się zmieniało gdy najadę na text?

jeff napisał(a):

Mam jeszcze pytanie, czy jest możliwość aby to się zmieniało gdy najadę na text?

Ale co za text?

Problem rozwiązany, dziękuje wszystkim za pomoc!