Mit Maus auf einen Link dann soll Layer verschwinden

itss · #1 (**permalink**) 02.08.2006, 23:08

Hallo,

folgendes Problem:

Ich sobald die Maus auf einen bestimmten Link kommt, das ein Layer eingeblendet ist. Und wenn ich den Link mit der Maus wieder verlasse, will ich das der Layer wieder ausgeblendet wird.

Geht das überhaupt mit CSS?

Danke für Antworten

Gruß Sascha

heiko_rs · #2 (**permalink**) 02.08.2006, 23:16

Klar, im Link-Text befindet sich weiterer Text in einem <span>-Tag (natürlich alles innerhalb von <a></a>), der im Link-"Normalzustand" per display: none; nicht zu sehen ist. Bei Hovern mit der Maus bekommt a:hover span ein display: block; mit allen weiteren Angaben und wird absolut positioniert angezeigt, wo es Dir paßt

Es muß natürlich kein Text enthalten sein, sondern kann z.B. auch eine Hintergrundgrafik enthalten (evtl. preloaden, per position: absolute; "im Nirvana").

Wenn Du in Mozilla & Co soweit bist, wird der IE evtl. noch Schwierigkeiten machen, aber das ist dann auch leicht behoben (wohlgemerkt alles komplett ohne JS).

EDIT: Das funktioniert übrigens wirklich "überall", sogar im IE 5.0, kann also wirklich ohne Weiteres eingesetzt werden, ohne daß manchen Nutzern Inhalte bzw. Effekte vorenthalten bleiben.

itss · #3 (**permalink**) 03.08.2006, 00:21

schon mal danke, nur leider verstehe ich das nicht so richtig. Bin leider eher so der anfänger

heiko_rs · #4 (**permalink**) 03.08.2006, 00:52

Mal komplett auf's Grundlegende reduziert: Du hast das Markup

Code:

<a href="#">Hier mit der Maus drüberfahren <span>dann erscheint dieser Text.</span></a>

Den ersten Teil des Textes sieht man immer (als normalen Link-Text). Der zweite Teil wird per CSS "unsichtbar" gemacht:

Code:

a span {
	display: none;
	}

Wenn Du dann mit der Maus über den Link fährst, kommt die Pseudoklasse "hover" ins Spiel; dann wird der Zusatztext so angezeigt, wie nachfolgend per CSS festgelegt:

Code:

a:hover span {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	}

Diese CSS-Regel bewirkt Folgendes: Sobald Du mit der Maus über den Link-Text fährst, erscheint der Zusatztext ganz oben links im Browserfenster. Position und Aussehen des Zusatztextes kannst Du mit unzähligen weiteren Eigenschaften beliebig bestimmen.

itss · #5 (**permalink**) 03.08.2006, 11:26

ahhh danke jetzt habe ich verstanden.

Danke Schön

itss · #6 (**permalink**) 03.08.2006, 11:47

leide habe ich gerade festgestellt das das bei mir nicht im Internet Explorer geht das ist mein Quellcode:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
a span {
	display: none;
	}
a:hover span {
	display: block;
	position: absolute;
	/*left: 0;
	top: 0;*/
	}
-->
</style>
</head>

<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="6%" bgcolor="#074B46"><a href="#">Menu1<span>
    <div id="Layer1" style="position:relativ; width:200px; height:115px; z-index:1"><table width="196" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#074B46">
    <td width="196">Test123</td>
  </tr>
  <tr bgcolor="#074B46">
    <td>est123</td>
  </tr>
  <tr bgcolor="#074B46">
    <td>test123</td>
  </tr>
  <tr bgcolor="#074B46">
    <td>test123</td>
  </tr>
</table></div></span></a></td>
    <td width="51%" bgcolor="#074B46">kjg</td>
    <td width="11%" bgcolor="#074B46">kjgkhg</td>
    <td width="11%" bgcolor="#074B46">kjgkhg</td>
    <td width="10%" bgcolor="#074B46">kjgkjg</td>
    <td width="11%" bgcolor="#074B46">kjgkhg</td>
  </tr>
</table>
</body>
</html>

gibt es eine möglichkeit das zum laufen zu bringen

RoToRa · #7 (**permalink**) 03.08.2006, 12:46

Zitat:

Zitat von itss

gibt es eine möglichkeit das zum laufen zu bringen

Da muss ich hart sagen: Nein, das wirst du neu schreiben müssen.

Ich weiss, es ist als Anfänger schwer, aber bevor du solche CSS-Hover-Spielereien machst musst du dich zuerst mit den Grundlagen von HTML beschäftigen. Dazu gehört, das du lernen musst, wie HTML aufgebaut wird. Unter anderem darf ein Inline-Element (a, span) nämlich keine Block-Elemente (div, table, etc.) enthalten.

Offensichtlich willst du ein Menü erstellen. Schau Dir dazu folgendes an: http://htmldog.com/articles/suckerfish/dropdowns/

Aber wie gesagt ohne Basiswissen wird das schwer. Da solltest du Dir ein Tutorial durcharbeiten, z.B. http://htmldog.com/guides/ oder, wenn nicht auch nicht so gut, aber in Deutsch: http://de.selfhtml.org/

Robin

itss · #8 (**permalink**) 03.08.2006, 12:48

aber im Firefox geht das doch auch

RoToRa · #9 (**permalink**) 03.08.2006, 13:03

Zitat:

Zitat von itss

aber im Firefox geht das doch auch

Das liegt daran, dass der FF zufällig richtig "rät" was du mit einem falschen Code willst.

Robin

itss · #10 (**permalink**) 03.08.2006, 13:58

Ok danke

ich habe mir jetzt mal das Menü von Sucherfish angeguckt. Und ich habe bei den Hauptpunkten die Breitweggenonnen, da ich manche langen name habe und wenn ich alle auf diese breite setze dann passt das nicht auf die Seite, aber wie kann ich den Abstand zwischen den einzelnen Menü Punkten machen?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
clearen im 21 Jhr.	Muamicus	CSS	23	14.12.2010 20:50
ul richtig zentrieren	Muamicus	CSS	23	14.12.2010 19:28
Definitionsliste in einer Floatumgebung	*pi	CSS	11	07.01.2009 19:34
Ständig wechselnde Bilder, Werbung	Vybsi	(X)HTML	17	25.01.2008 00:00
CSS Navigationsproblem	thesecretboy	CSS	0	12.04.2007 09:12