:hover innego diva

Question

Witam, jak zrobić, aby po najechaniu kursorem na przykladowo zdjecie, zmienialy sie własciwosci innego diva?

Answer 1

O tak:

div.class1:hover + div.class2
{
  //tutaj style dla div.class2, które będą widoczne po najechaniu na div.class1
}

 

Comments

Ale to oznacza, że div o klasie "class2" znajduje się wewnątrz div-a o klasie "class1". Pytającemu nie o to chodziło.

---

no wlasnie mam cos podobnego i nie działa mi

.png:hover .title
{
 color:white;
}

<li ><span class="title">Logo</span></li>
				<img class="png" src="materialy\firma\Logo.png">

 

---

div.class1:hover + div.class2 {}

Ale to oznacza, że div o klasie "class2" znajduje się wewnątrz div-a o klasie "class1"

@SzkolnyAdmin, nie, ponieważ tu jest użyty selektor następnego przyległego rodzeństwa.

no wlasnie mam cos podobnego i nie działa mi

@Hubert Wajda, ponieważ .title nie jest wewnątrz .png, tak jak wskazuje selektor. Przy tej strukturze HTML nie obędzie się bez JS-a. Użyj even listenera na event mouseover i wtedy nadaj klasę, która w CSS będzie zmieniać kolor.

Mógłbyś ewentualnie zmienić strukturę na:

<img class="png" src="materialy\firma\Logo.png">

<li>
  <span class="title">Logo</span>
</li>

, i wtedy:

.png:hover + li .title
{
 color:white;
}

powinno działać, ale ten kod HTML nie będzie prawidłowo ustrukturyzowany, bo skoro jest tam <li>, to jego rodzicem musi być <ol> lub <ul>. Z kolei te elementy nie mogą zawierać w sobie innych dzieci niż <li> (lub <script> lub <template>), więc użycie <img> jako bezpośredniego dziecka listy jest błędem.

Tak, czy inaczej, kod HTML, który pokazałeś ma nieprawidłową strukturę. Popraw ją. Jeśli obrazek z klasą png i span z klasą title będą w osobnych elementach <li>, to nie obędzie się bez użycia JavaScriptu (CSS nie posiada bowiem selektora rodzica).

---

Rozumiem, bardzo dziękuję za pomoc :D

---

@ScriptyChris, @SzkolnyAdmin ma rację. Dopiero edytowałem swój wpis. Początkowo był być znaku +

Answer 2

https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered

https://stackoverflow.com/questions/18749276/css-on-hover-show-another-element

Answer 3

Tak, jeżeli div jest bratem obrazka. Poszukaj selektora brata w CSS.

Lub nadaj klasy (lepiej) albo identyfikatory (gorzej) elementom: obrazkowi i div-owi.

Answer 4

Można zastosować trik z position

<ul>
  <li>
    <img class="png" src="http://lorempixel.com/150/150/city">
    <span class="title">Logo</span>
  </li>
</ul>

ul {
  position: relative;
  list-style-type: none;
}
ul img {
  position: absolute;
  display: block;
  top: 1.2em;
}
ul .title {
  position: absolute;
  top: 0;
  font-size: 1em;

  /* dodane dla demonstracji nie wymagane ;-) */
  letter-spacing: 0;
  transition: all 0.5s;
}
.png:hover + .title
{
  color: green;

  /* dodane dla demonstracji nie wymagane ;-) */
  letter-spacing: 1em;
}