<Div> A:HOVER will nicht!

Status
Nicht offen für weitere Antworten.
B

BladeNeo

Erfahrenes Mitglied
Hallo!

Hab folgenden Div- Container, der ein Menü darstellen soll:
<div style="padding-top:100px"></div>
<div>
<div id="menu">
<a class='menu' href="index.html">Home</a>
<a class='menu' href="#">|Board</a>
<a class='menu' href="#">|Party-PicZ</a>
<a class='menu' href="#">|Contact</a>
</div>

(horizontal angeordnet, bis jetzt nur im Hintergrund blau und nebeneinander)

#menu{
top:123px;
left:192px;
position:absolute;
background-color:7BAFE3;
float:left;
margin:0px;
font-size: 11px;
padding:3px 11px;
}

Würde jedoch gerne einzelne Vierecke haben mit den Links drinnen.. diese sollen dann bei hover (mouse-over link) eine andere Hintergrundfarbe kriegen... habs schon mit
A.menu:hover{background-color:white;}
versucht klappt aber nicht!

hab am Anfang allgemein a:hover { } eingegeben.. hängt dies damit zu sammen? da er nach diesem aggiert.

Vielen Dank im Vorraus.

Mit freundlichen Grüßen,
BladeNeo
 
Hallo!

Eine Klasse .menu (bei Dir nicht im Stylesheet aber beim Link verwendet => class="menu") ist etwas ganz anderes als ein div (bie Dir im Stylesheet und im HTML => #menu).

Am einfachsten dürfte es sein, Du definierst einfach eine Klasse für die Links und gibst dort die entsprechenden Formatierungen an.

Code: 
#menu{
top:123px;
left:192px;
position:absolute;
background-color:7BAFE3;
float:left;
margin:0px;
padding:3px 11px;
}

a.menuLinks:hover {
font-size:11px;
background-color:#FFFFFF;
border:1px solid #000000;
}

Natürlich für alle Zustände (hover, active usw)

Dann klappt's auch mit dem Nachbarn :)

Gruss
 
Danke für die schnelle Antwort.

Hab's mit

A.menulink:hover{
FONT- family:Verdana, Arial, Helvetica, sans-serif;
COLOR:#000000;
FONT-SIZE:10pt;
}

<div id="menu">
<a class='menulink' href="index.html">Home</a>
<a class='menulink' href="#">|Board</a>
<a class='menulink' href="#">|Party-PicZ</a>
<a class='menulink' href="#">|Contact</a>
</div>

versucht.. klappt aber nicht.. die verfärben sich immer noch nach dem Schema:

a:link {color:#000000}
a:visited {color:#000000}
a:hover {color:#365E86;}
a:active {color: #000000}
a{font-family:verdana,arial}
a{font-size: 11px; text-decoration: none}

Eigentlich will ich bloß so Buttons wie hier (vorerstmal) die mit Hover die Farbe wechseln.. aber egal was ich mach die reagieren überhaupt nicht.
MfG,
BladeNeo
 
Zuletzt bearbeitet:
Hallo!

Versuch's mal so, bei mir geht's :)
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#menu{
top:123px;
left:192px;
position:absolute;
background-color:7BAFE3;
float:left;
margin:0px;
padding:3px 11px;
}
a.menulink:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:10pt;
}
a.menulink:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:10pt;
background-color:#FF0000;
}
a.menulink:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FF0000;
font-size:10pt;
background-color:#00FF00;
}
a.menulink:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-size:10pt;
background-color:#FFFF00;
}
a:link {color:#000000;
}
a:visited {color:#000000;
}
a:hover {color:#365E86;
}
a:active {color: #000000;
}
a{font-size: 11px; text-decoration: none}
</style>
</head>

<body>
<div id="menu">
<a class='menulink' href="index.html">Home</a>
<a class='menulink' href="#">|Board</a>
<a class='menulink' href="#">|Party-PicZ</a>
<a class='menulink' href="#">|Contact</a>
</div>
</body>
</html>

Und hier gäbt's noch ein bisschen mehr an Info: Dr.Web

Gruss
 
hi,

wenn ich das richtig verstanden habe, hast du in Deiner CSS (a:hover) immer noch den Befehl color anstatt background-color. falls du das ganze in einer tabelle machen willst, würde ich deinen Hover so gestalten:

a.menulink:hover {
background-color:#;
display:block;
width:100%;
height:100%;
}

Hoffe, das hilft Dir!
 
Hey Super! Vielen Dank..
War's also wegen dem color? hab ich gar nicht gemerkt.

Würde jetzt noch gerne eine kleine Veränderung durchführen.
Undzwar sollte Home bei Aufruf der Index.. schon ne andere Farbe haben.
Jedoch bei Klick auf einen anderen Link, soll er die normale Farbe annehmen.

Er soll also bei aufruf der Index.html schon aktiviert sein.

MfG,
BladeNeo
 
Hallo!

Das geht nur "von Hand". Der Status active bei den Links steht für den Moment, indem der Button gedrückt wird. Sobald Du wieder los lässt, ist der Status nicht mehr active...

Mach doch einfach den Link auf der jeweiligen Seite raus, und formatiere mit einer eigenen Klasse diesen Button mit einer anderen Farbe.

Gruss
 
Das erfüllt aber nicht den Sinn.
Ich habe eine index.html und dann jeweils die HTML-Dateien die per Hyperlink in den I-Frame geladen werden.
Auf der Index liegt nun diese DIV-Container mit den Hyperlinks.
Der Sinn und Zweck ist, dass die momentane Page ausgewählt ist.
Also immer angepasst.. sobald ich auf den Link klicke soll er den Inhalt in den I-Frame laden den alten aktiven (farblich markierten) Link de-markieren und den neuen aktiven Link farblich markieren.

Hoffentlich versteht des jemand :)
 
Ich weiss schon, was Du meinst, aber dafür gibt es in HTNL oder CSS keine Lösung. Da muß javascript ran...

Sorry, aber das hilft leider nicht...

Gruss

Achso, ich muß da leider passen, javascript ist nicht mein Ding ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück