|
|||
css: current_page_item und hover in verschiedenen farben
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;} PHP-Code:
Hab schon vieles probiert, aber es klappt nicht!! |
Sponsored Links |
|
|||
Moin
also du musst eben dem aktuellen-Link, den du geändert haben willst, eine ID oder Klasse zuweisen. Das kannst du eigendhändig auf den einzelnen Seiten machen, oder wenn du zB die navi ausgelagert hast per PHP: PHP-Code:
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. << |
Sponsored Links |
|
|||
Gib einfach dem Menupunkt, den du als "aktiviert" markiert haben willst auf der Seite auf der du das so haben willst, eine Id mit. Die definierst du dann genauso wie du den :hover definiert hast in deiner style.css.
Beispiel: Dein Markup sieht folgendermaßen aus: HTML-Code:
<ul id="menu"> <li><a href="index.htm" title="">Startseite</a></li> <li><a href="brum.htm" title="">Brum Brum</a></li> <li><a href="didel.htm" title="">Didel di Hopsasa</a></li> </ul> Auf dieser Seite hast du ebenfalls das Menu mit demselben Markup wie oben. Nun gibst du aber dem Link "Brum Brum" in der Datei "brum.htm" zusätzlich eine ID mit: HTML-Code:
<ul id="menu"> <li><a href="index.htm" title="">Startseite</a></li> <li><a id="aktiv" href="brum.htm" title="">Brum Brum</a></li> <li><a href="didel.htm" title="">Didel di Hopsasa</a></li> </ul>
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. << |
|
|||
ich weiß net, ich glaub, du hast mich falsch verstanden!
also es gibt, sagen wir, 6 links. jeder einzelne link hat verschiedene hover farben, wie ich es schon hingekriegt hab. ->> jeder einzelne link soll verschiedene current_page_item farben haben (die farben wie bei hover),.. also wenn man auf einen link klilckt soll er auch die farbe annehmen wie beim hovereffekt.. und wenn du das doch so meinst, weiss ich net wie ich das hinbekommen soll, auch nicht, durch deine anleitung |
|
|||
Ok
um weitere Missverständnisse zu vermeiden: Cascading Style Sheets { Konzepte und Grundlegendes } Meinst du das so wie bei den Menus? (nur eben dass der aktive-Status gleich dem :hover ist, also dass dann eben beide einen blauben bg haben) Du versucht das hinzubekommen, dass in dem Fall "Grundlagen" im Menu anders definiert wurde?
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. << |
|
|||
(nur eben dass der aktive-Status gleich dem :hover ist, also dass dann eben beide einen blauben bg haben)
genau das mein ich, .. hab da schon was mit li class versucht aber das klappte auch nicht.. |
|
|||
Zitat:
Eventuell benötigst du dann noch ein !important Code:
.klasse a { background: #000 !important; color: #F00 !important }
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. << |
|
|||
ich hatte es so probiert
Code:
ul.page li a.link1:hover {background-color:#376092; outline:3px double #d9d9d9; color:#FFF; text-align:center;} ul.page li a.link2:current_page_item {background-color:#376092; outline:3px double #d9d9d9; color:#FFF; text-align:center;} PHP-Code:
|
Sponsored Links |
|
|||
Woher hast du denn das mit dem current_page_item?
:hover ist eine Pseudoklasse, mehr dazu hier. Dann bringt es nichts dem Link1 die Klasse Link2 zuzuweisen, das macht keinen Sinn in dem Zusammenhang. Ehrlich gesagt weiß ich gerade nicht, wie ich es dir noch erklären könnte... Bau das mal bei dir ein und schau man an wie es aussieht: HTML-Code:
<ul class="page"> <li><a class="link1" id="aktiv" 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> Code:
ul.page li a.link1:hover,#aktiv {background-color:#376092; outline:3px double #d9d9d9; color:#FFF; text-align:center;} ul.page li a.link2:hover,#aktiv {background-color:#92d050; outline:3px double #d9d9d9; color:#FFF; text-align:center;} ul.page li a.link3:hover,#aktiv {background-color:#ddbd7d; outline:3px double #d9d9d9; color:#FFF; text-align:center;} ul.page li a.link4:hover,#aktiv {background-color:#ba8c30; outline:3px double #d9d9d9; color:#FFF; text-align:center;} ul.page li a.link5:hover,#aktiv {background-color:#ce7674; outline:3px double #d9d9d9; color:#FFF; text-align:center;} ul.page li a.link6:hover,#aktiv {background-color:#88a9d2; outline:3px double #d9d9d9; color:#FFF; text-align:center;}
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. << |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Verschiedene Hintergrundfarben bei verschiedenen Seiten nur mit CSS möglich? | Andimau | CSS | 2 | 07.07.2011 15:19 |
Div Orientierung | Leonidus | CSS | 22 | 30.05.2007 18:05 |
css tooltip hover problem | Deude | CSS | 2 | 15.05.2005 18:49 |
CSS: hover bei Links | RayBan | CSS | 2 | 05.11.2004 23:26 |
Links in verschiedenen Farben | mika | CSS | 2 | 29.04.2004 14:02 |