• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dwie listy - zmienianie stylu

VPS Starter Arubacloud
0 głosów
596 wizyt
pytanie zadane 2 lipca 2017 w HTML i CSS przez Lopez Początkujący (460 p.)

Witam!

Mam dwie listy: w jednej tekst jest bezpośrednio w <li></li>, a w drugiej zamiast tekstu występuje znacznik <i> jako ikonka i ten znacznik sprawia mi problem. Chcę bowiem, by po najechaniu kursorem na ikonkę - zmieniał się kolor ikonki oraz kolor odpowiadającego jej tekstu (i odwrotnie). Ikonka na złoto/srebrno/brązowo a tekst na biały.

 

                <div id="achievments">
                    <p id="achievments-heading">moje osiągnięcia</p>
                    <ul class="list-inline" id="achievments-trophies">
                        <li><i class="fa fa-trophy fa-4x" id="trophy-gold1" aria-hidden="true"></i></li>
                        <li><i class="fa fa-trophy fa-4x" id="trophy-gold2" aria-hidden="true"></i></li>
                        <li><i class="fa fa-trophy fa-4x" id="trophy-silver" aria-hidden="true"></i></li>
                        <li><i class="fa fa-trophy fa-4x" id="trophy-bronze1" aria-hidden="true"></i></li>
                        <li><i class="fa fa-trophy fa-4x" id="trophy-bronze2" aria-hidden="true"></i></li>
                        <li><i class="fa fa-trophy fa-4x" id="trophy-other" aria-hidden="true"></i></li>
                    </ul>
                    <ul class="list-unstyled" id="achievments-titles">
                        <li id="title-gold1">TEKST1</li>
                        <li id="title-gold2">TEKST2</li>
                        <li id="title-silver">TEKST3</li>
                        <li id="title-bronze1">TEKST4</li>
                        <li id="title-bronze2">TEKST5</li>
                        <li id="title-other">TEKST6</li>
                    </ul>
                </div>

 

komentarz 2 lipca 2017 przez xmentor Nałogowiec (49,520 p.)
Zrób z tego jedną listę.
komentarz 9 lipca 2017 przez Lopez Początkujący (460 p.)
W jaki sposób? Teraz jedna jest pozioma, druga pionowa. Jak zrobić z tych dwóch jedną?
komentarz 9 lipca 2017 przez xmentor Nałogowiec (49,520 p.)
<ul class="list-inline" id="achievments-trophies">
  <li>
    <span class="fa fa-trophy fa-4x" id="trophy-gold1" aria-hidden="true"></span>
    <span class="title title-gold1">Gold 1</span>
  </li>
  <li>
    <span class="fa fa-trophy fa-4x" id="trophy-gold2" aria-hidden="true"></span>
    <span class="title title-gold2">Gold 2</span>
  </li>
  <li>
    <span class="fa fa-trophy fa-4x" id="trophy-silver" aria-hidden="true"></span>
    <span class="title title-silver">Silver</span>
  </li>
  <li>
    <span class="fa fa-trophy fa-4x" id="trophy-bronze1" aria-hidden="true"></span>
    <span class="title title-brozne1">Bronze 1</span>
  </li>
  <li>
    <span class="fa fa-trophy fa-4x" id="trophy-bronze2" aria-hidden="true"></span>
    <span class="title title-bronze2">Bronze 2</span>
  </li>
  <li>
    <span class="fa fa-trophy fa-4x" id="trophy-other" aria-hidden="true"></span>
    <span class="title title-other">Other<span>
  </li>
</ul>

 

3 odpowiedzi

0 głosów
odpowiedź 2 lipca 2017 przez niezalogowany
Pokaż style CSS
komentarz 2 lipca 2017 przez Lopez Początkujący (460 p.)
#achievments
{
    text-align: center;
    margin-top: 0px;
    padding-top: 80px;
}

#achievments-titles
{
    color: #bdbec3;
    font-family: "LatoLatinWebSemibold";
    font-size: 30px;
    margin-top: 50px;
}

#trophy-gold1, #trophy-gold2
{
    color: #d29f34;
}

#trophy-silver
{
    color: #999a9e;
}

#trophy-bronze1, #trophy-bronze2
{
    color: #906346;
}

#trophy-other
{
    color: #776c71;
}

W stylach tylko ustawione kolory, ew. jakieś marginesy = pierdoły. Klasy list-inline i list-unstyled z Bootstrapa

 

 

komentarz 2 lipca 2017 przez imklau Nałogowiec (42,090 p.)
dobrze masz chyba wszystko w stylach
dodaj sobie hover tak jak chciałeś i w czym problem?
komentarz 2 lipca 2017 przez Lopez Początkujący (460 p.)

W tym, że np.

#trophy-bronze1:hover
{
    color: #264644;
    #title-bronze1 { color:white;}
}

nie działa. Jak to zapisać poprawnie?

komentarz 2 lipca 2017 przez imklau Nałogowiec (42,090 p.)

pierwszy raz widzę takie coś surprise

czyli to ma wyglądać tak że u góry jest jedna lista z ikonkami, a na dole druga lista z tekstem i w zależności od tego na jaką ikonkę się najedzie to ma ona zmienić kolor + odpowiedni do niej tekst również ?
nie możesz zrobić tego za pomocą jednej listy?

komentarz 2 lipca 2017 przez Lopez Początkujący (460 p.)
Nie mogę, ponieważ lista z ikonkami jest pozioma, a pod nią pionowa lista z tytułami. Najeżdżasz na ikonkę - ona zmienia kolor np. na złoty, a odpowiadający jej tekst (tytuł) na biały. I odwrotnie
komentarz 2 lipca 2017 przez imklau Nałogowiec (42,090 p.)
nie słyszałam żeby można było w CSS zrobić takie coś, więc raczej musisz użyć JS
komentarz 2 lipca 2017 przez Lopez Początkujący (460 p.)
Może być i JS. Wszystko jedno. Oby działało :(
komentarz 2 lipca 2017 przez imklau Nałogowiec (42,090 p.)
Niestety, ale tu nie dostaniesz gotowego kodu ;)
Próbuj w takim razie z JS, a jakbyś miał problem to wracaj z nim na forum ;)
0 głosów
odpowiedź 2 lipca 2017 przez imklau Nałogowiec (42,090 p.)

więc sięgnij nie po samo <li> w CSS, a po znacznik <i>

li i:hover {
color: red;
}
0 głosów
odpowiedź 2 lipca 2017 przez JayJay Mądrala (6,020 p.)

Proponowałbym Ci umieścić każda parę (ikona i jej podpis) w oddzielnym div'ie i każdemu z tych div'ów nadać display:inline-block.

Np. coś takiego:

<div class="gold2">
    <div class="rank-i"><i class="fa fa-trophy fa-4x" id="trophy-gold1"></i></div>
    <div class="rank-t">Gold 1</div>
  </div>
  <div class="gold1">
    <div class="rank-i"><i class="fa fa-trophy fa-4x" id="trophy-gold2"></i></div>
    <div class="rank-t">Gold 2</div>
  </div>
  <div class="silver">
    <div class="rank-i"><i class="fa fa-trophy fa-4x" id="trophy-silver"></i></div>
    <div class="rank-t">Silver</div>
  </div>
.gold2,.gold1, .silver{
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #ddd;
  margin: 10px;
  font-size: 50px;
  text-align: center;
}

.gold2:hover i{
  color: #DAA520;
}
.gold2:hover .rank-t{
  color: #fff;
}

.gold1:hover i{
  color:  #808080;
}
.gold1:hover .rank-t{
  color: #fff;
}
.silver:hover i{
  color: #DAA520;
}
.silver:hover .rank-t{
  color: #fff;
}

Edit:Nie spojrzałem wcześniej na komentarze, ale może to rozwiązanie na coś się jeszcze kiedyś przyda ;)

Podobne pytania

0 głosów
1 odpowiedź 91 wizyt
pytanie zadane 3 kwietnia 2017 w HTML i CSS przez Max Borek Nowicjusz (230 p.)
0 głosów
4 odpowiedzi 751 wizyt
pytanie zadane 3 maja 2015 w HTML i CSS przez Teoss Nowicjusz (200 p.)

92,453 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...