✔ CSS und Mouse over

[SixxKiller]

Hi Leutz!

Hab ein kleines Problem mit CSS wobei ich Hilfe benötige.
Hab von einem Bekannten eine Seite bekommen die ich überarbeiten soll.
Nun bin ich gerade an der Navigation. Diese läuft halt über CSS, Links sowie
die Buttons im Hintergrund.
CSS:

#nav a
{
  display: block;
  color: #002e65; 

	font-size: 11px; 
	line-height: 15px;  
	font-weight: bold; 
	font-family: Verdana; 
	text-align: left;	
	text-decoration:none;
	text-align:right;

	line-height:23px;
	
	
	width:155px;
	height:23px;
}

#nav a:hover
{
  display: block;
  color: #000000; 
	font-size: 11px; 
	line-height: 15px;  
	font-weight: bold; 
	font-family: Verdana; 
	text-align: left;	
	text-decoration:none;
	text-align:right;
	line-height:23px;
	
	width:155px;
	height:23px;
}

#nav #freunde
{
  display: block;
	background-image:url('nav-singles.jpg');
	background-repeat:no-repeat;
}

#nav #freunde-sel
{
  display: block;
	background-image:url('nav-singles-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

#nav #mcenter
{
  display: block;
	background-image:url('nav-mcenter.jpg');
	background-repeat:no-repeat;
}

#nav #mcenter-sel
{
  display: block;
	background-image:url('nav-mcenter-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

#nav #radio
{
  display: block;
	background-image:url('nav-radio.jpg');
	background-repeat:no-repeat;
}

#nav #radio-sel
{
  display: block;
	background-image:url('nav-radio-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

#nav #partybilder
{
  display: block;
	background-image:url('nav-partybilder.jpg');
	background-repeat:no-repeat;
}

#nav #partybilder-sel
{
  display: block;
	background-image:url('nav-partybilder-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

#nav #events
{
  display: block;
	background-image:url('nav-events.jpg');
	background-repeat:no-repeat;
}

#nav #events-sel
{
  display: block;
	background-image:url('nav-events-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

#nav #home
{
  display: block;
	background-image:url('nav-home.jpg');
	background-repeat:no-repeat;
}

#nav #home-sel
{
  display: block;
	background-image:url('nav-home-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

#nav #partyverpasser
{
  display: block;
	background-image:url('nav-partyverpasser.jpg');
	background-repeat:no-repeat;
}

#nav #partyverpasser-sel
{
  display: block;
	background-image:url('nav-partyverpasser-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

#nav #locations
{
  display: block;
	background-image:url('nav-locations.jpg');
	background-repeat:no-repeat;
}

#nav #locations-sel
{
  display: block;
	background-image:url('nav-locations-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

#nav #forum
{
  display: block;
	background-image:url('nav-forum.jpg');
	background-repeat:no-repeat;
}

#nav #forum-sel
{
  display: block;
	background-image:url('nav-forum-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

#nav #sonst
{
  display: block;
	background-image:url('nav-sonst.jpg');
	background-repeat:no-repeat;
}

#nav #sonst-sel
{
  display: block;
	background-image:url('nav-sonst-sel.jpg');
	background-repeat:no-repeat;
	color: #FFFFFF;
}

html:

	    		<tr>
		        <td width=155>
		          <a href='index.php'  id=home-sel>
					Startseite&nbsp;&nbsp;&nbsp;&nbsp;</a>
				    </td>
					</tr>
	      
	    		<tr>

		        <td>
	        <a href='uns.php' id=freunde>
			Über Uns&nbsp;&nbsp;&nbsp;&nbsp;</a>
				    </td>
					</tr>

Nun möchte ich zusätzlich das die Buttons einen Mouseover bekommen.
Hab jetzt schon mehrere Versuche gestartet aber entweder funktioniert der Mouseover nicht oder der Button verschwindet. Da ich kaum Ahnung hab mit CSS wäre ich für Hilfe dankbar.

Greetz SixxKiller

 

[Maik]

Hi,

kannst du kurz mitteilen, was du hier konkret unter einem "Mouseover" verstehst?

Etwa einen Tausch der Hintergrundbilder? Dann dürfte dir mein CSS-Tutorial CSS-Rollover weiterhelfen.

 

[SixxKiller]

Hallo Maik.

Dein Tut hab ich vorm posten schon angeschaut aber ich steig
nicht wirklich durch da ich nicht genau weiß was ich ersetzen/austauschen
muss oder nur hinzufügen. Meine Kenntnisse sind halt sehr beschränkt
bei CSS.
Die Links werden ja schon ausgetauscht, mir geht es drum die Background
Bilder auszutauschen.

Greetz SixxKiller

 

[Maik]

Okay, hier mal das Beispiel für den Menüpunkt #freunde:

#nav #freunde {
display: block;
background-image:url(nav-singles.jpg);
background-repeat:no-repeat;
}

#nav #freunde:hover {
background-image:url(nav-singles-hover.jpg);
}

Und so spielst du das für jeden einzelnen Link durch.

 

[SixxKiller]

Perfekt!
Danke Maik so funktioniert es einwandfrei.
Nochmals Danke!

Greetz SixxKiller