hover mit css und html

18.02.2008, 15:22 #1

hallihallo

ich hab da mal wieder eine frage

, mal schauen ob ich mich klar ausdrücken kann.

Grundlage für den ganzen quatsch ist css bzw. html. js und flash soll umgangen werden. das ganze soll mind. fifo und ie tauglich sein.

Text 1 | Text 2

Das soll an einer bestimmten stelle dastehen. wenn man mit der maus über text 1 fährt (mouseover, hover), dann soll das ganze so aussehen:

Text 1 | Text 2
Link 1 | Link 2 | Link 3 | Link 4

fährt man hingegen über Text 2 soll das ganze so aussehen (die Links auch unter Text 1 beginnend):

Text 1 | Text 2
Link 5 | Link 6 | Link 7 | Link 8

Das überfahren von Text 1 oder 2 soll also eine neue Textzeile ergeben in der verschiedene links erscheinen die selbstverständlich auch anklickbar sein sollen

. ich bin ja durchaus in der lage in css a:hover zu definieren um irgendwelchen quatsch zu machen wie Text 1 fett und in anderer farbe, aber das brauch ich ja gerade nicht und ich scheiter daran, festzulegen dass ein a:hover eben eine ganz neue textzeile auslöst, die dann auch noch mit links gefüllt ist. bzw. wie schreibe ich, dass das überfahren von einem div ein neues div ausgibt? pseudoelemente wie :bevor und :after haben mich auch nicht weitergebracht und selbst wenn das funktionieren würde, mag der ie solche pseudoelemente auch bloß nicht.

eine js lösung habe ich, allerdings wird die vom ie nicht gemocht -> der ie zeigt einfach gar nichts an (ja, js ist aktiviert im ie (6.x)). wenn es gar nicht anders geht müsste das wohl über grafiken gelößt werden (denke ich mal *g*)

aber vllt versteht ja jmd was ich meine und weiß zu helfen.

danke im vorraus

feli

18.02.2008, 16:06 #2

Also wenn du wirklich nur html und css einsetzen magst, wirst du das, denke ich mal, über absolut positionierte Elemente machen müssen.

Quasi mal ne Kurzbeschreibung ohne Code :

In jeden Anker eines 'Text 1' Links/Buttons setzt du am Anfang ein inline Element deiner Wahl (z.B. span oder em). Beim hovern des 'Link 1' Textes lässt du dann das darin positionierte Elemente als Block Element mit relativer/absoluter Position anzeigen. Da dieses Element sich ja theor, egal wo es angezeigt wird, noch in dem äußeren Link befindet, müsste das 'hover' bestehen bleiben während du über die inneren Links fährst.

Allerdings dämmert mir gerade, valides HTML wir das nicht werden, a innerhalb von a ist denk ich nich erlaubt. Und die äußeren 'Text 1' Links sollten möglichst kein Linkziel haben, sonst könnten sich je nach Browser beide Seiten öffnen.

Wenn noch Fragen sind ...

18.02.2008, 21:14 #3

so, ich glaube orion hat eine lösung und die klingt eigentlich genau nach dem was du geschrieben hast gagget

in der php steht folgendes:

Code:

      <div id="navigation"> 
           <ul class="oben"> 
              <li class="oben"><a href="#">Text 1</a> 
                 <ul class="unten"> 
                   <li class="unten"><a href="#">Link 1</a></li> 
                   <li class="unten"><a href="#">Link 2</a></li> 
                   <li class="unten"><a href="#">Link 3</a></li> 
                   <li class="unten"><a href="#">Link 4</a></li> 
                 </ul>
              </li>

              <li class="oben"><a href="#">Text 2</a> 
                 <ul class="unten"> 
                   <li class="unten"><a href="#">Link 5</a></li> 
                   <li class="unten"><a href="#">Link 6</a></li> 
                   <li class="unten"><a href="#">Link 7</a></li> 
                   <li class="unten"><a href="#">Link 8</a></li> 
                 </ul> 
              </li> 
           </ul> 
       </div>

und in der css das hier:

Code:

* HTML {  
    behavior: url('hover.htc');   
}  
  
#navigation {  
 width: 45%;  
 float: right; 
 position: relative; 
 margin-top: 20px;
 
}  
  
#navigation UL {  
 list-style: none;  
 padding: 0px;
}  
 
#navigation UL.unten {  
 display: none; 
} 
  
#navigation UL LI A {  
 text-decoration: none;  
 color: #000000;
}  
  
#navigation UL LI.oben {  
 display: inline; 
}  
  
#navigation UL.oben LI:hover UL.unten {  
 display: block;  
 position: absolute;  
 top: 100%; 
}  
  
#navigation LI.unten {  
 display: inline; 
  
} 
 
#navigation UL LI A { 
    display: block; 
    float: left; 
    margin: 0px 50px 0px 0px;
}

nur mal so, vllt brauchts ja irgendwann mal jmd der genau so wenig drauf hat wie ich

18.02.2008, 21:42 #4

und hier ein kleines tutorial welches erklärt was der orion da gemacht hat (zumindest fast)

http://www.peterkroener.de/2007/07/1...ne-javascript/

20.02.2008, 16:39 #5

Schöne Lösung, gefällt mir ... wusste gar nicht das dem IE sowas nachträglich noch einprügeln kann. Weil eigtl ist das doch CSS 3 oder net ?

Hach ja, damit werden mal soviele geile Sachen möglich sein ...

20.02.2008, 18:04 #6

nö, du kannst eigentlich für alles den hover effekt festlegen, der IE 6 kann das auch aber er ignorierts für alle ausser für A.

21.02.2008, 11:43 #7

Und hier noch ein Link für die Freunde bunter Bilderchen: http://www.alistapart.com/d/sprites/ala-blobs2.html#

Ähnliche Themen, die dich vielleicht interessieren
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Windows] Internet Explorer 8 Beta Screenshots	OrionX	Betriebssysteme und Software	13	08.03.2008 22:52
PC kackt bei CS 1.6 und CS:S ab! Graka?!	Haze\|Stoned	Hardware	2	17.12.2007 13:03
html und text formatierung einer email	wAxman	Coder's Area	3	07.09.2005 10:11
Re: Könnt ihr Programmieren - Ist HTML eine Programmierersprache?	xy2er	Coder's Area	10	23.03.2004 23:28
html Buch	BlackIce	Coder's Area	13	27.04.2002 06:11

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen