css: current_page_item und hover in verschiedenen farben

frank.drebin

Hi,

Ich möchte, dass wenn man in der Sidebar über einen Seitenlink geht, sich die Farbe unterschiedlich zu den anderen Links ändert (hover effekt mit klassen: klappt schon). Er soll dazu aber auch, wenn man eine Seite angeklickt hat (current_page_item) die jeweilige hover Farbe annehmen.

hier der CSS - Code für den hover effekt, was ja schon top klappt:

Code

ul.page li a.link1:hover {background-color:#376092; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link2:hover {background-color:#92d050; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link3:hover {background-color:#ddbd7d; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link4:hover {background-color:#ba8c30; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link5:hover {background-color:#ce7674; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}
ul.page li a.link6:hover {background-color:#88a9d2; outline:3px double #d9d9d9; color:#FFF;  text-align:center;}

das ganze in der sidebar:

PHP

<ul class="page">
<li><a class="link1" href="xxx">Link 1</a></li>
<li><a class="link2" href="xxx">Link 3</a></li>
<li><a class="link3" href="xxx">Link 3</a></li>
<li><a class="link4" href="xxx">Link 4</a></li>
<li><a class="link5" href="xxx">Link 5</a></li>
<li><a class="link6" href="xxx">Link 6</a></li>
</ul>

Das klappt ja auch alles sehr gut! Wie baue ich da nun das current_page_item rein. Mit den jeweiligen Farben der hover klassen?

Hab schon vieles probiert, aber es klappt nicht!!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

derblog

hallo
ich frag auch mal:

wo und wie genau, muss ich

PHP

page_item.

und

PHP

current_page_item.

einfügen?

das

Code

.page_item a:hover, .current_page_item a {
background: #444; }

ist ja für die css.

Monika

wp_list_pages macht das von selber

daher brauchst du die Klassen nur mehr auszeichnen in der style.css

lg

derblog

ah! ok, das war ja recht easy...allerdings wollt ich dann doch nicht den background gefärbt haben, sonder das wort an sich.
hab versucht das mit " color: " zu erreichen - hat nicht geklappt....:-?

derblog

weiß niemand rat?

maxe

mal einen Link zum Blog??

derblog

ja klar:
hier müsste halt, wenn man ein seite ausgewählt hat, das wort oben in der navi orange bleiben...

Monika

Zitat von derblog

ja klar: Freedom Skateboards
hier müsste halt, wenn man ein seite ausgewählt hat, das wort oben in der navi orange bleiben...

Farbe ändern, außer Du magst es grün haben ;)

Code

#nav ul li.current_page_item a{
    color:green;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

derblog

ja bin ich denn zu blöd, oder was....?
klappt nicht!

ist hier was falsch?:

Code

#nav{
    /*background:#FFFFFF;*/
    font-size:2.5em;
    margin: 0 auto 77px;
    width:779px;
        text-align:center;
}


#nav ul{
    list-style-type:none;
}
#nav ul li{
    font-weight:bold;    
    float:left;
    letter-spacing:1px;
    margin-bottom:-3px;
    margin-right:10px;
    padding:2px 5px;
}
#nav ul li a{
    color:#871B1A;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
#nav ul li a:hover{
    color:#FF8000;
}
#nav ul li.current_page_item a{
    color:#FF8000;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

Alles anzeigen

maxe

Zitat von derblog

hier müsste halt, wenn man ein seite ausgewählt hat, das wort oben in der navi orange bleiben...

Also bei mir im FF bleibts orange. Browser-Cache geleert?

derblog

ok, hat funktioniert!
wieso muss man nur manchmal das cache löschen bzw was ist das eigentlich?

danke euch!

Monika

Zitat von derblog

ok, hat funktioniert!
wieso muss man nur manchmal das cache löschen bzw was ist das eigentlich?
danke euch!

damit Du die Seiten im Browser schneller siehst -speichert der ein Abbild - das ist der Cache - mancher speichert dies für xyz Aufrufe der nächste für xyzab Aufrufe,
;)

bei Änderungen ist es hilfreich, wenn man da immer str+f5 oder f5 klickt
das erneuert den Browsercache -

lg

derblog

ah, ok. alles klar....

aber jetzt hab ich noch ´ne frage:
kann man das so machen, dass die navi oben orange bleibt, auch wenn ich auf ein unterseite gehe? z.B. bei "products" unterseite "decks"
Freedom Skateboards Products

Monika

Zitat von derblog

ah, ok. alles klar....
aber jetzt hab ich noch ´ne frage:
kann man das so machen, dass die navi oben orange bleibt, auch wenn ich auf ein unterseite gehe? z.B. bei "products" unterseite "decks"
Freedom Skateboards Products

Code

#nav ul li.current_page_ancestor a{
    color:#FF8000;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

:mrgreen:

derblog

ihr seid der hammer...
tausend dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

css: current_page_item und hover in verschiedenen farben

Jetzt mitmachen!