Cześć, mam takie pytanko czy da się zamienić stronami ikonę z opisem bez przepisywania całego kodu dla innej strony? Chodzi mi o to, że po najechaniu chciałbym mieć ikonkę w tym samym miejscu co była przed najechaniem, czyli tak jak zdj1 i zdj2. Przez mały błąd i zapomnienie jednego diva, zrobiłem cały wygląd na <i> zamiast na divie, i tak po prostu nie mogę odwrócić kolejności a chciałbym mieć napis "Statystyki" przed ikoną (zdj3)
<section class="status">
<div class="status_content">
<div class="podzial">
<div class="podglad_na_serwer">
<i class='bx bx-show'><p class="hidden_info">Podgląd na serwer</p></i>
</div>
<div class="statystyki">
<i class='bx bx-bar-chart'><p class="hidden_info">Statystyki</p></i>
</div>
</div>
</div>
</section>
.status .status_content .podzial .statystyki
{
width: 12.5%;
height: auto;
display: flex;
position: relative;
justify-content: flex-end;
font-size: 24px;
}
.status .status_content .podzial .statystyki i
{
width: 19%;
padding-left: 10px;
padding-right: 10px;
border-radius: 0 8px 8px 0;
display: flex;
align-items: center;
color: #fff;
background: #cc0000;
cursor: pointer;
transition-duration: 0.5s;
}
.status .status_content .podzial .statystyki i .hidden_info
{
display: none;
}
.status .status_content .podzial .statystyki i:hover
{
width: 100%;
}
.status .status_content .podzial .statystyki i:hover .hidden_info
{
display: block;
font-size: 14px;
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
animation: fadeIn 1.25s ease;
}
.status .status_content .podzial .podglad_na_serwer
{
width: 12.5%;
height: auto;
display: flex;
position: relative;
justify-content: flex-start;
font-size: 24px;
}
.status .status_content .podzial .podglad_na_serwer i
{
width: 19%;
padding-left: 10px;
padding-right: 10px;
border-radius: 8px 0 0 8px;
display: flex;
align-items: center;
color: #fff;
background: #cc0000;
cursor: pointer;
transition-duration: 0.5s;
}
.status .status_content .podzial .podglad_na_serwer i .hidden_info
{
display: none;
}
.status .status_content .podzial .podglad_na_serwer i:hover
{
width: 100%;
}
.status .status_content .podzial .podglad_na_serwer i:hover .hidden_info
{
display: block;
font-size: 14px;
text-align: center;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
animation: fadeIn 1.25s ease;
}
bx-bar-char
ma zmieniony tylko font w.status .status_content .podzial .statystyki {font-size: 24px}
i zmieniony kolor w.status .status_content .podzial .statystyki i {color: #fff}
Pierwotnie nie miało być tego "Podglądu na serwer" i "Statystyk" po bokach, dodałem to po jakimś czasie bo było pusto, tak w ogóle miało to inaczej wyglądać stąd też icona, jednak plany się zmieniły bo nie pasowało to do wyglądu strony a nie wpadłem potem na to, żeby dodać to jako `background-position. Zobaczymy rano czy będzie działać na
background-position```