# tabelle: mouse-in / mouse-out



## phil-ip (26. März 2005)

hi, ich hoffe ihr könnt mir weiter helfen?! ich möchte gerne einen mouse-in / mouse-out effekt nutzen. Wenn man in dieser Tabelle mit der Maus über eine Spalte geht, soll sich die Farbe der Schrift ändern, und die Spalte neben der breiteren mit dem "Text" drin, soll sich farblich ändern.

Bitte helft mir!


```
<table width="157" border="1" align="left" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#FBFBFB">
	  <tr>
		<td width="8" bgcolor="#E6E6E6">&nbsp;</td>
		<td width="143"><span class="Stil1">Home</span></td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">About Me</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Umfragen</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">G&auml;stebuch</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Forum</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Photos</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Downloads</td>
	  </tr>
	  <tr>
		<td height="21" bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1">Impressum</td>
	  </tr>
	</table>
```


----------



## Trice (26. März 2005)

<html>
<head>
<script type="text/javascript">
	<!--
		function change(x)
		{
			x.style.color = "#545454";
			x.previousSibling.style.backgroundColor = "#767676";
		}

		function back(x)
		{
			x.style.color = "#000000";
			x.previousSibling.style.backgroundColor = "#E6E6E6";
		}
	//-->
</script>
</head>
<body> 
 <table width="157" border="1" align="left" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#FBFBFB">
	  <tr>
		<td width="8" bgcolor="#E6E6E6">&nbsp;</td>
		<td width="143"><span class="Stil1">Home</span></td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">About Me</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Umfragen</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">G&auml;stebuch</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Forum</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Photos</td>
	  </tr>
	  <tr>
		<td bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Downloads</td>
	  </tr>
	  <tr>
		<td height="21" bgcolor="#E6E6E6">&nbsp;</td>
		<td class="Stil1" onmouseover="change(this)" onmouseout="back(this)">Impressum</td>
	  </tr>
	</table> 
</body>
</html>

___________________________________________________________________

Funktioniert leider nicht auf allen Browsern.
Ciao...


----------



## Gumbo (27. März 2005)

Mein Vorschlag:
	
	
	



```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title></title>
	<style type="text/css">
		* {
			margin:			0;
			padding:		0;
			border-style:		none;
		}
		#nav {
			list-style-type:	none;
			width:			10em;
		}
		#nav a:link,
		#nav a:visited {
			display:		block;
			padding-left:		0.5em;
			color:			#000;
			border-left:		8px solid #e6e6e6;
			background-color:	#fbfbfb;
		}
		#nav a:hover {
			border-color:		#696;
			background-color:	#fe0;
		}
	</style>
</head>


<body>
<ul id="nav">
	<li><a href="/home">Home</a></li>
	<li><a href="/aboutme">About Me</a></li>
	<li><a href="/umfragen">Umfragen</a></li>
	<li><a href="/gaestebuch">Gästebuch</a></li>
	<li><a href="/forum">Forum</a></li>
	<li><a href="/photos">Photos</a></li>
	<li><a href="/downloads">Downloads</a></li>
	<li><a href="/impressum">Impressum</a></li>
</ul>
</body>
</html>
```


----------

