[CSS]Jak wykorzystywać :hover w css? Opcje

[Marco1357]

Czy :hover w CSS-e można wykorzystać do przeprowadzania zmian w innej części kodu, strony? Czyli np: najeżdżamy myszką nad przycisk a wykonuje się zmiana, operacja w innej części kodu, strony, czy jest tylko wykorzystywany do odnośników?.
Czy można zrobić tak?:

ol > li > .klas:hover div > p {
...
}

Z góry dziękuję za odpowiedź.

[trueblue]

Można. Właściwie nie w kodzie, ale w stylach innych elementów.
Nie spróbowałeś?

[Marco1357]

Można. Właściwie nie w kodzie, ale w stylach innych elementów.
Nie spróbowałeś?

Właśnie próbowałem i nie działa. Dlatego pytam. Może jakąś stronę by pan polecił.

Ten post edytował Marco1357 15.03.2023, 14:37:49

[trueblue]

https://jsfiddle.net/5rb0hufw/

Pokaż swój kod.

[Marco1357]

https://jsfiddle.net/5rb0hufw/

Pokaż swój kod.

[PHP] pobierz, plaintext 
 
 <div class="tabelka">
 
    <table>
  <tr>
    <th>SZCZEGÓŁY</th>
    <th>STACJA/PRZYSTANEK</th>
    <th>DATA</th>
    <th>ODJ./PRZYJ.</th>
    <th>CZAS</th>
    <th>PRZESIADKI</th>
    <th>ŚRODEK TRANSPORTU</th>
    <th></th>
  </tr>
  <tr>
    <td>      
         <ol>
                <li>rozwiń
                    <ul>
 
 
                        <li class=" li_1 li_2"><div class = "rozwin_tabelka rozwin_tab_2">
 
 
 
                <ol class ="klas">
                    <li>SZCZEGÓŁY
                    <ul>
                        <li>
 
                            <div class="szczegol">
 
                                <div class="jeden">
                                    <a href="#"> ZOBACZ PEŁNĄ TRASĘ</a>
 
                                </div>
 
 
                                <div class="dwa">           </div>
                                <div class="trzy">          </div>
 
 
 
 
 
                                <div style="clear:both"></div>
 
 
 
 
                            </div>
 
 
 
 
                        </li>
 
                    </ul>
                    </li>
 
                    <li class="stacje">STACJE POŚREDNIE
                    <ul>
                        <li class="posrednie">Aktualności</li>
 
                    </ul>
                    </li>
 
                    <li>EKSPORT DO PDF
                    <ul>
                        <li class="pdf">Aktualności</li>
 
                    </ul>      
                    </li>
 
                 </ol>
 
 
                 <div style="clear:both;"></div>
 
                        <div class = "wzmianka">
                     <p>   kursuje w okresie od    do    2023  </p>
 
                        </div>
 
 
 
                        </div></li>
 
 
                    </ul>
                </li>
 
 
 
 
 
            </ol>
 
 
 
 
 
    </td>
 
 
[PHP] pobierz, plaintext 

oraz CSS:

[CSS] pobierz, plaintext 
 
 
td > ol {
 
    list-style-type: none;
    padding:0;
    margin:0;
    font-size:14px;
 
    text-align:center;
    /* margin-left: 150px; */
 
 
 
 
}
 
 
td > ol > li {
 
 
    width:80px;
    height:auto;
    text-align: center;
    margin:0px;
    padding-top: 10px;
 
 
 
    /* height:2em; -----rozciaganie menu w dol */
 
 
 
  }
 
 
  td > ol > li:first-child {
    margin-left:18px;
 
 
  }
 
 
td > ol a {
    display:block;
    color:black;
    text-decoration:none;
 
 
  }
 
  td > ol > li > a:hover {
    color:white;
    display:block;
 
 
  }
 
  td > ol > li:hover {
    background-color:rgb(48, 110, 126);
 
 
 
 
  }
 
  td > ol > li > ul{
 
    list-style-type: none;
    text-align: left;
    padding: 0;
    display:none;
 
 
 
  }
 
  /* td > ol > li > ul > li */
  .li_1{
    margin-left: -19px;
    margin-top: 17px;
    padding:2px  ;
    border-left: 1px solid white;
    border-top: 2px solid white;
    background-color:darkcyan;
    width:992px;
    height:300px;
 
 
 
 
 
  }
 
  td > ol > li > ul > li:hover{
 
    background-color:#DDD;
    cursor:auto;
 
 
 
 
  }
 
 
 
  td > ol > li > ul > li:hover a{
 
    color:darkcyan;
    cursor: auto;
 
 
 
  }
 
  td > ol > li:hover > ul {
    display:block;
 
 
 
  }
 
.rozwin_tabelka {
    height: 300px;
    width: 991px;
    margin-left: -3px;
    margin-top: -1px;
    border:3px solid darkcyan;
    margin-bottom: 1px;
 
    background-color: darkgray;
    position:relative;
 
 
 
 
}
 
.wzmianka {
 
  color:black;
  position:relative;
  top: -4px;
  padding-left: 10px;
  font-size: 13px;
}
 
 
/* menu do rozwin */
 
 
td > ol > li > ul > li > .rozwin_tabelka > ol {
 
  list-style-type: none;
  padding:0;
  margin:0;
 
  text-align:center;
  /* margin-left: 150px; */
  float:left;
  margin-left: 20px;
  margin-top: 240px;
 
 
}
 
 
td > ol > li > ul > li > .rozwin_tabelka > ol > li {
 
  float:left;
  background-color:darkcyan;
  width:240px;
  margin-right: 10px;
  font-size: 12px;
 
 
 
 
  /*  height:2em;  -----rozciaganie menu w dol 
   */ 
 
 
}
 
 
td > ol > li > ul > li > .rozwin_tabelka > ol > li:first-child {
  margin-left:0;
 
}
 
 
td > ol > li > ul > li > .rozwin_tabelka > ol a {
  display:block;
  color:white;
  text-decoration:none;
 
 
}
 
td > ol > li > ul > li > .rozwin_tabelka > ol > li > a:hover {
  color:white;
  text-align: center;
}
 
td > ol > li > ul >  li > .rozwin_tabelka > ol > li:hover {
  background-color:white;
  width:240px;
  height: 50px;
  margin-top: -5px;
  color:darkcyan;
  border-top: 0px;
 
 
 
 
 
 
}
 
td > ol > li > ul > li > .rozwin_tabelka > ol > li > ul{
 
  list-style-type: none;
  text-align: left;
  padding: 0;
  display:none;
  margin: 0;
 
}
 
td > ol > li > ul > li > .rozwin_tabelka > ol > li > ul > li{
 
  padding:2px 15px ;
 
  background-color:white;
  position:relative;
  margin-top:-262px;
  width:810px;
  height: 220px;
 
 
 
 
 
 
 
 
}
 
 
 
 
td > ol > li > ul > li > .rozwin_tabelka > ol > li > ul > li:hover a{
 
  color:blue;
  text-decoration: underline;
 
}
 
td > ol > li > ul >  li > .rozwin_tabelka > ol > li:hover > ul {
  display:block;
 
 
}
 
 
  .posrednie {
 
  padding:2px 15px ;
 
  background-color:brown;
  position:relative;
  margin-top:-262px;
  width:810px;
  height: 300px;
  margin-left: -250px;
 
 
}  
 
.pdf {
 
  padding:2px 15px ;
 
  background-color:white;
  position:relative;
  margin-top:-262px;
  width:810px;
  height: 2220px;
  margin-left: -500px;
 
 
}
 
/* .rozwin_tab_2 {
 
  height: 550px;
  
  
 
 
 
}
 
 
  .li_2{
 
 
    height:550px;
 
 
} */
 
 
 
/* td > ol > li > ul > li > .rozwin_tabelka >  .klas {
 
  list-style-type: none;
  padding:0;
  margin:0;
 
  text-align:center;
  margin-left: 150px; 
  float:left;
  margin-left: 20px;
  margin-top: 240px;
  margin-bottom: 245px;
  position: relative;
  bottom:-245px;
 
  
}   */
 
 
 
 
 
 
 
tr > td > ol > li > ul >  li > .rozwin_tabelka > ol > li > .stacje:hover  tr > td > ol > li > ul > li > .rozwin_tabelka {
  height:550px;
 
 
 
 
 
}
 
tr > td > ol > li > ul >  li > .rozwin_tabelka > ol > li > .stacje:hover  tr > td > ol > li > ul > li > .li_2 {
  height:550px;
 
 
 
 
}
 
 
 
 
 
 
 
 
[CSS] pobierz, plaintext 

chodzi mi o dwa ostatnie polecenia w pliku CSS.

[trueblue]

Takie selektory nie zadziałają. Chciałbyś z pomocą CSS sterować elementem nadrzędnym za pomocą elementu podrzędnego. Póki co w CSS nie ma selektora, który by to umożliwiał.
Widzę, że chcesz zmienić wysokość elementu nadrzędnego, bo wcześniej ustaliłeś wysokość 300px. Dlaczego nie taką, aby po prostu zmieściła się w nim zawartość (czyli bez ustalania height, albo height: auto)?

[Marco1357]

Takie selektory nie zadziałają. Chciałbyś z pomocą CSS sterować elementem nadrzędnym za pomocą elementu podrzędnego. Póki co w CSS nie ma selektora, który by to umożliwiał.
Widzę, że chcesz zmienić wysokość elementu nadrzędnego, bo wcześniej ustaliłeś wysokość 300px. Dlaczego nie taką, aby po prostu zmieściła się w nim zawartość (czyli bez ustalania height, albo height: auto)?

Dzięki za pomoc oraz za szczegółowe wyjaśnienia.

[viking]

Tak nie do końca, zależy https://developer.mozilla.org/en-US/docs/Web/CSS/:has

[trueblue]

Masz rację, viking.
Dla jednej z reguł będzie to wyglądać tak:

[HTML] pobierz, plaintext 
.li_2:has(.stacje:hover){
 height:550px;
}
[HTML] pobierz, plaintext 

[LowiczakPL]

Czy :hover w CSS-e można wykorzystać do przeprowadzania zmian w innej części kodu, strony? Czyli np: najeżdżamy myszką nad przycisk a wykonuje się zmiana, operacja w innej części kodu, strony, czy jest tylko wykorzystywany do odnośników?.

Bez problemu można zmienić wartości dowolnych elementów nie musi to być parent czy child. Służy do tego selektor +, wskazujesz jaki element ma ulec zmianie

przykład hover na elemencie .jeden zmieni kolory na elemencie .dwa

[HTML] pobierz, plaintext 
<style>
.jeden:hover + .dwa {
  color: #f00;
  background-color: red;
}
</style>
 
<div class="jeden"> jeden </div>
 
<div class="dwa"> dwa </div>
[HTML] pobierz, plaintext 

[trueblue]

Bez problemu można zmienić wartości dowolnych elementów nie musi to być parent czy child. Służy do tego selektor +, wskazujesz jaki element ma ulec zmianie

Ale tym selektorem można zmienić tylko bezpośredniego sąsiada na tym samym poziomie hierarchii. Bardziej ogólny byłby ~. Niemniej obydwa nie pozwalają zmienić elementów na wyższym poziomie względem elementu odniesienia.