XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Mit Maus auf einen Link dann soll Layer verschwinden (http://xhtmlforum.de/showthread.php?t=41078)

itss 02.08.2006 23:08

Mit Maus auf einen Link dann soll Layer verschwinden
 
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 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 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 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 03.08.2006 11:26

ahhh danke jetzt habe ich verstanden.

Danke Schön

itss 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 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 03.08.2006 12:48

aber im Firefox geht das doch auch

RoToRa 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 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?


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:46 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020