[jQuery] Zeige Extrainformationen

[klanawagna]

Hallo!
Was muss ich tun, damit bei diesem JS-Code (jquery), diesem HTML und diesem CSS der <em> text neben dem Link auftaucht? Ich bin am verzweifeln...

$(document).ready(function(){

	$(".menu a").hover(function() {
	  $(this).next("em").show("fast");
	  
	}, function() {
	  $(this).next("em").hide("fast");
	});

});

<ul class="menu">
   <li>
      <a href="">Web-Entwicklung</a>
      <em>Erfahren sie mehr über meine bisherigen Projekte</em>
	</li>
	<li>
		<a href="">Mein Lebenslauf</a>
		<em>Interessiert sie mein Lebensverlauf?</em>
	</li>
</ul>

body {
	margin: 10px auto;
	font: 75%/120% Arial, Helvetica, sans-serif;
	background-color:cccccc;
	white-space:nowrap;
}
.menu a {
	/*display: block;*/
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	white-space:nowrap;
}
.menu li em {
	display: none;
	font-size: 10px;
}

Danke!

lg
klanawagna

 

[Maik]

Was muss ich tun, damit bei diesem JS-Code (jquery), diesem HTML und diesem CSS der <em> text neben dem Link auftaucht?

Nix, denn genau das geschieht doch.



mfg Maik

 

[klanawagna]

nein, vorher wird es noch in der unteren zeile angezeigt und springt dann hoch! bei euch nicht? browser?

 

[Maik]

Dann nutze halt die CSS-Eigenschaften float (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float) und clear (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#clear).

.menu {
width:350px; /* Breite von mir  frei gewählt */
}
.menu li {
clear:both;
}
.menu a {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    white-space:nowrap;
    float:left;
}
.menu li em {
    display:none;
    font-size: 10px;
    float:right;
}

Und vernachlässige bitte in deinen Folgebeiträgen nicht die Shift-Taste, um beim Verfassen deiner Beiträge groß- und kleinzuschreiben, wie es in unserer Netiquette erwünscht wird - vielen Dank!

mfg Maik