kostenloser Webspace werbefrei: lima-city

Mouseover ohne JS

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   w***********r

   22:35, 13.1.2006

   Seehofer!
   
   Ich wollte mal fragen, wie Apple auf seiner Quicktime-Guide-Seite ( http://www.apple.com/quicktime/guide/ ) die untere Navigation macht. Das Komische ist, dass es einen Mouseover-Effekt gibt, allerdings ohne Javascript, sondern nur mit CSS.
   Ich habe mir schon den Quelltext, aber es sind nur CSS-Dateien eingebunden, wichtig scheint hier http://www.apple.com/quicktime/quicktime.css . Dort ist das Bild http://images.apple.com/quicktime/images/nav_bg.gif eingebunden, welches beide Phasen des Effekts zeigt, was mir noch komischer erscheint.
   Kann mir jemand sagen, wie das funktioniert, ich w?rde so etwas n?mlich auch gern f?r meine HP (in spe ...) nutzen.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. alopex

   

   alopex hat kostenlosen Webspace.

   14:49, 14.1.2006

   Im Prinzip so:
   
   element.klasse
   {
   display: none;
   // breite, h?he, position usw.
   }
   
   element.klasse:hover
   {
   display: block;
   // breite, h?he, position usw.
   }
   
   *nachtr?glich_einf?g*
   
   Ich hab mir die Seite mal angeschaut -- ich dachte erst, es gibt da Aufklapp-Men?s. Aber der Hover-Effekt da ist ja noch simpler:
   
   element.klasse {
   background: bild_oder_farbe;
   }
   
   element.klasse:hover {
   background: anderes_bild_oder_andere_farbe;
   }
   
   Das geht ?brigens nicht nur mit Links, sondern mit allen Elementen -- wenn der Browser nicht uralt ist.
   
   Beitrag ge?ndert am 14.01.2006 14:54 von alopex

4. kitzing

   kitzing hat kostenlosen Webspace.

   18:25, 14.1.2006

   Bei mir funktioniert der Hover-Effekt weder mit Firefox 1.0 noch mit dem IE.

5. m**************n

   18:35, 14.1.2006

   wo soll da ?berhaupt ein Hoover sein? Bei mir (ie6) ?ndert sich lediglich unten in der Browserleiste der text...
   
   Und warum Hoover nicht in css???? Wie sonst? Alles andere w?re Javascrpt.
   
   
   Bsp CSS mal im Head Deiner Datei einsetzen:
   
   <style type="text/css">
   <!--
   a:link {
   }
   a:hover {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 36px;
   color: #003399;
   }
   -->
   </style>
   
   Beitrag ge?ndert am 14.01.2006 18:52 von multimediadesign

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?