Hover Effekt soll auch andere Class ändern

mtdsbwy · #1 (**permalink**) 28.08.2006, 16:33

Joa, mein Problem betrifft meine Navigationsleiste. Is alles sehr schlicht gehalten, einfache Wortlinks, die beim Mouseover die Schriftfarbe (in weiss) ändern. So, ist ein Bereich angewählt wird der entsprechende Link farblich geändert (in weiss). Geht man nun auf einen anderen Bereich nimmt dieser durch Hover die Farbe weiss an, aber, es soll nun die Farbe des aktullen Bereiches (die class heisst aktuell) sich in die normale Linkfarbe der Navigation ändern...

Es soll also beim Hover sich auch eine andere Class ändern...Ist dies irgendwie zu erreichen?

Hab hier und bei Google Tage gesucht, aber hab auch keinen Plan wie ich die Suche ausdrücken soll*g*

Dank im vorraus

E|H · #2 (**permalink**) 28.08.2006, 17:21

Ich hätte da eine Idee, würde aber gerne erst dein HTML sehen.

mtdsbwy · #3 (**permalink**) 28.08.2006, 17:31

Also, is alles schlicht gehalten, hier der Quelltextausschnitt:

Code:

<div id="navi"><!--Beginn Navicontainer-->
<a href="news.html" class="aktuell">News</a> | <a href="lineup.html" class="navi">Line Up</a> | <a href="dates.html" class="navi">Termine</a> | <a href="e_loc.html" class="navi">Eintritt &amp; Location</a> | <a href="impr.html" class="navi">Impressionen</a> | <a href="kontakt.html" class="navi">Kontakt</a>
</div><!--Ende Navicontainer-->

Und hier der passende CSS-Ausschnitt:

Code:

/* Navicontainer */
div#navi
{
  float:left;
  width:429px;
  margin:0%;
  height:18px;
  background-image: url("navi.png");
  color:#FF0000;
  font-size:9px;
  font-weight:bold;
  font-family:tahoma;
  line-height:18px;
}
a.navi:link, a.navi:visited, a.navi:active, a.navi:hover, a.aktuell
{
 color:#BEB9A9;
 font-size:9px;
 text-decoration:none;
 font-family:tahoma;
 font-weight:bold;
 margin-right:3px;
 margin-left:3px;
 line-height:18px;
}
/* Hovereffekt Links */
a.navi:active, a.navi:hover
{
 color:#FFFFFF;
}
/* aktueller Link */
a.aktuell
{
 color:#FFFFFF;
}/* Ende Links im Navicontainer */

lona · #4 (**permalink**) 28.08.2006, 18:31

Hallo,

Du kannst das, was Du willst, zumindest mit JavaScript erreichen, in dem Du dem aktuellen Link eine id (z. B. id="beispiel") zuweist, und diesem Element dann per Javascript bei onMouseOver

Code:

document.getElementById("beispiel").style.color = "#BEB9A9";

eines anderen Navipunktes eine andere Farbe gibst.

Wüßte jetzt leider nicht, dass sowas auch ohne JS möglich ist..

Gruß Lona

mtdsbwy · #5 (**permalink**) 28.08.2006, 19:19

Danke, das wär ne Idee!

Ich setz mich mal ran, nach der Bandprobe*g*
An sich is JS nich so wild, wenn es nen Besucher aus hat, dann fehlt der kleine Effekt halt...nich so wild...

E|H · #6 (**permalink**) 29.08.2006, 19:15

Falsch. Ich meide JS wie der Teufel das Weihwasser.

Erstens solltest du aus der Navi eine Liste machen. Dann brauchst du nur noch die Farbe des gewünschten Links (oder des Listenpunktes) ändern, wenn die Liste gehovert wird:

ul:hover li.current{}

Siehe hier: http://css.maxdesign.com.au/index.htm

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe css Menu center	xXcyberXx	CSS	5	28.11.2010 19:51
Problem mit CSS Menü	SMundt	CSS	9	07.01.2009 19:12
CSS Navigation - Problem mit IE6	pcklinik	CSS	4	18.09.2007 12:04
Darstellungsproblem CSS Navigation im IE7	pcklinik	CSS	7	09.09.2007 17:25
CSS Einsteiger bittet um Hilfe	pcklinik	CSS	0	06.09.2007 14:40