CSS-Background Hover Problem (icecream)

icecream
Gast

« am: 03.11.05, 19:37:20 »

Hallo, ich habe eine HTML-Datei erstellt, in denen die Links in einzelnen Spalten stehen... nun habe ich eine CSS-Datei gemacht. Ich möchte, dass wenn ich über diese Links mit der Mouse fahre, dass sich der Hintergrund der Zeile, bzw. Spalte eine bestimmte Farbe färbt... wie mach ich das?

GRuß
iced.

Moderator informieren

icecream
Gast

Re: CSS-Background Hover Problem

« Antwort #1 am: 03.11.05, 19:39:12 »

Ach ja - die Seite findet ihr unter:
http://project-evolution.de/NEWGAMERPAGE/

GRuß
iced.

Moderator informieren

Der olle Schwoebel (3.917)
Special-Member

18x Beste Antwort

23x "Danke"

Re: CSS-Background Hover Problem

« Antwort #2 am: 03.11.05, 20:06:29 »

Hat dir diese Antwort geholfen?

Na machs am Besten damit :

Code: [Auswählen]

a /* Definition der Links im "Normalzustand" */
	{
	cursor: pointer; /* Beim Drüberfahren ändert sich der Mauszeiger */
	display: block; /* Die Hover-Eigenschaften gelten für die ganze Höhe und Breite des Links */
	color: #969696; /* Farbe der Links */
	padding: 2px 4px 4px 8px; /* Abstand zum Rand des LINKS */
	margin: 1px 0px; /* Rand (nur beim Drüberfahren) */
	text-decoration: none; /* Keine Text "Verziehrung" */
	font-size: 0.92em; /* Schriftgröße der Links */
	}

a:hover /* Formatierung der Links beim Drüberfahren */
	{
	border: 1px solid #DDDDDD; /* Hellgrauer (#DDDDDD) Rahmen von 1px  /*
	margin: 0px; /* Auch hier kein Rand /*
	padding: 2px 4px 4px 7px; /* Abstand zum Rand (Rahmen) /*
	background-color: #000000; /* Hintergrundfarbe des Links /*
	color: #0099FF; /* Farbe des Links beim Drüberfahren */
	text-decoration: none; /* Auch hier keine Textverziehrung */
	}

Kannst du natürlich noch abändern, aber wichtig ist display: block

Moderator informieren

icecream
Gast

Re: CSS-Background Hover Problem

« Antwort #3 am: 03.11.05, 20:13:14 »

... Ich wollte es eigentlich mit Spalten und Zeilen machen hier ein paar Fetzen Code:

<tr class="linkbg">
<td class="linkbg"><a href="index.php?show=gamingnews">Gaming.News</a></td>
</tr>

Und dazu der CSS-Code:

.linkbg {
background:#ffffff;
}

.linkbg:hover {
background:#cccccc;
}

Aber das funktioniert nicht... warum?

GRuß
iced.

Moderator informieren

Der olle Schwoebel (3.917)
Special-Member

18x Beste Antwort

23x "Danke"

Re: CSS-Background Hover Problem

« Antwort #4 am: 04.11.05, 15:51:52 »

Hat dir diese Antwort geholfen?

Also so geht das ja schonmal nicht, das class="linkbg" muss ja schon auf den Link bezogen sein, also

Code: [Auswählen]

[b]<a href="index.php?sow=gamingnews" class="linkbg">Gaming.News</a>[/b]

Das ganze erreichst du dann hiermit :

Code: [Auswählen]

a.linkbg {
color: #000000;
background-color: #FFFFFF;
display: block;
width: 100px;
height: 10px;
}

a.linkgb:hover {
background-color: #CCCCCC;
width: 100px;
height: 10px;
}

Die Höhe und Breite muss man dabei manuell anpassen.

Ich würde dir aber trotzdem dazu raten, die ganze Homepage mit CSS zu machen, das hat einige Vorteile. Ein Beispiel bzw. Tutorial findest du hier :

http://www.derolleschwoebel.de/links-tipps_specialeffects.php#spaltenlayout

Da gibts ein komplett auskommentiertes Beispiel zum "Einbau" und Download des Beispiels..

Tabellen sind ja, wie ich auch lernen "durfte" keine Strukturhilfe

Moderator informieren

CSS-Background Hover Problem

Antworten zu CSS-Background Hover Problem:

Re: CSS-Background Hover Problem

Mehr zu CSS-Background Hover Problem