[CSS] Bei Hover über Tabelle soll Div eingeblendet werden

[bodo2005]

Habe das Problem, dass wenn man mit der Maus über der Tabelle ist, nicht der neue Div-Layer eingeblendet wird:

#ad_bottom
 	{
 		float: right;
 		background: url('../img/ad.jpg') repeat-y left top;
 		border: 1px;
 		border-style: solid;
 		border-color: black;
 		border-right-width: 2px;
 		padding: 2px;
 	}
 	
 			#ad_bottom img
 			{
 				border: 1px;
 				border-style: solid;
 				border-color: black;
 				border-left-width: 2px;
 				padding: 2px;
 				margin-bottom: 5px;
 			} 	 
 			
 	.meldung
 	{
 		border: 1px;
 		border-style: solid;
 		border-color: #FF0000;
 		position: absolute;
 		bottom: 90px;
 		left: 220px;
 		width: 200px;
 		background: #FFDFDF;
 		padding: 4px;
 		text-align: justify;
 		display: none;
 	}	
 	
 			#ad_bottom:hover .meldung
 			{
 				display: inline;
 			}

Der neue Layer ist .meldung, die Tabelle #ad_bottom...

Hat jemand eine Idee warum?

 

[Batti]

AW: [CSS] Bei Hover über Tabelle, soll Div eingeblendet werden

Hi bodo,

In welchem Browser hast du den Effekt denn ausprobiert, weil soweit ich weiß z.B. der IE den Effekt hover nur auf Links zulässt.

MfG

 

[bodo2005]

AW: [CSS] Bei Hover über Tabelle, soll Div eingeblendet werden

Opera und Firefox. Dass es im IE nicht geht, war mir ja klar, aber deshalb frage ich mich ja, warum dies nicht geht!?...

 

[PuppetMaster]

AW: [CSS] Bei Hover über Tabelle, soll Div eingeblendet werden

Bei mir klappts in Firefox mit folgendem Testbeispiel:

<div id="ad_bottom">Test<div class="meldung">Test2</div></div>

 

[bodo2005]

AW: [CSS] Bei Hover über Tabelle, soll Div eingeblendet werden

Also mein XHTML Code sieht so aus:

<table id='ad_bottom'>
				<tr>
				<td>
					<a href='http://james.adbutler.de/click.php?pid=9682&tid=141466&bid=47998' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9682&bid=47998&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
					<a href='http://james.adbutler.de/click.php?pid=9349&tid=141466&bid=46371' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9349&bid=46371&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
					<a href='http://james.adbutler.de/click.php?pid=9977&tid=141466&bid=51712' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9977&bid=51712&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
				</td>
				</tr>
				</table>
				<div id='meldung'>
					Meldung
				</div>

Hab auch schon alles versucht, aber weiß leider immer noch nicht, worans liegt...

 

[PuppetMaster]

AW: [CSS] Bei Hover über Tabelle, soll Div eingeblendet werden

Okay, zwei Probleme:

Du schreibst .meldung statt #meldung, damit erstellst du eine Klasse und keine ID-Zuweisung. Somit musst du im HTML auch mit <div class='meldung'> arbeiten.

Zweitens musst du das unsichtbare Element in das Hover-Element packen. Probiers mal so:

<table id='ad_bottom'>
	<tr>
		<td>
			<a href='http://james.adbutler.de/click.php?pid=9682&tid=141466&bid=47998' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9682&bid=47998&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
			<a href='http://james.adbutler.de/click.php?pid=9349&tid=141466&bid=46371' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9349&bid=46371&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
			<a href='http://james.adbutler.de/click.php?pid=9977&tid=141466&bid=51712' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9977&bid=51712&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
			<div class='meldung'>
				Meldung
			</div>
		</td>
	</tr>
</table>

 

[bodo2005]

Vielen Dank, also im Opera gehts bestens:

#meldung
 	{
 		border: 1px;
 		border-style: solid;
 		border-color: #FF0000;
 		position: absolute;
 		bottom: 90px;
 		left: 220px;
 		width: 200px;
 		background: #FFDFDF;
 		padding: 4px;
 		text-align: justify;
 		display: none;
 	}	
 	
 			#ad_bottom:hover #meldung
 			{
 				display: inline;
 			}

<table id='ad_bottom'>
				<tr>
				<td>
					<a href='http://james.adbutler.de/click.php?pid=9682&tid=141466&bid=47998' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9682&bid=47998&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
					<a href='http://james.adbutler.de/click.php?pid=9349&tid=141466&bid=46371' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9349&bid=46371&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
					<a href='http://james.adbutler.de/click.php?pid=9977&tid=141466&bid=51712' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9977&bid=51712&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
					<a href='http://james.adbutler.de/click.php?pid=9938&tid=141466&bid=51516' target='_blank'><img src='http://james.adbutler.de/view.php?pid=9938&bid=51516&tid=141466&b=468&h=60&inv=img' width='468' height='60' border='0'></a>
				
					<div id='meldung'>
						Meldung
					</div>
				
				</td>
				</tr>
				</table>

Aber in Firefox leider nicht, siehst du oder jemand anderes, warum? Firefox hat bis jetzt diese Pseudo Hover immer dargestellt...

 

[PuppetMaster]

Hab deinen Code in Firefox 1.5.0.3 und in Bon Echo Alpha 2 ausprobiert, läuft einwandfrei!