Suchen
Inside Wiki
Nützliche Links




 
phpforum.de bei Facebook
 
phpforum.de bei Twitter
 

Zurück   PHP Forum: phpforum.de > phpforum.de Wiki > phpforum.de Wiki

PHP Wiki Dieses Wiki sammelt Lösungen, zu Problemen, welche immer wieder im Forum auftauchen.

 
 
Artikel-Optionen Ansicht
  #1  

Standard CSS whatever:hover

 

Inhalte

Problematik:


Im Punkto CSS würde jeder Designer den IE am liebsten vergessen. Das Problem ist, dass der IE die Pseudo-Klasse :hover (:active, :focus) nur auf den a-Tag unterstützt.
Jedoch in der heutigen Zeit, wo auf Tabellenloses und schlankes Webdesign mit hilfe von Div-Containern geachtet wird, ist es fast unverzichtbar geworden - den Hover-Effekt auf (fast) alle Html-Tags anzuwenden.

Lösung:


Peter Nederlof umgeht dieses Problem mit Javascript und hat das ganze in eine Datei names crosshover.htc gepackt. Diese Datei muss lediglich im mit behavior im body-Teil des Stylesheets eingetragen werden.

Beispiel:
Code:
body{
behaviour:url("csshover.htc");
}


Jetzt kann man auf alle Elemente, wie im Firefox auch möglich, die drei Pseudo-Klassen :hover, :active und :focus anwenden.

Beispiel
Code:
li:hover{
font-weight:bold;
/*usw..usw..*/
}


Interessant wird das ganze wenn man anhand von Listen (ul/li) ein Dropdown-Menü erstellen will.

Komplettbeispiel:
Code:
<style type="text/css">
body {
  behavior:url("csshover.htc");
}

/*dropdown*/
#navi li {position:relative;list-style:none;}
#navi li ul { display:none;position:absolute; }
#navi li:hover ul { display:block;}
</style>

<ul id="navi">
    <li>Menu
      <ul >
        <li>Menu 1</li>
        <li>Menu 2</li>
      </ul>
    </li>
</ul>

Ausblick


Für den IE 8 wird das oben beschriebene Vorgehen nicht mehr nötig sein, da der IE 8 die Pseudoklassen unterstützen wird.

Links



Mitwirkende: Sebbl, reloader
Erstellt von reloader, 29.05.2008 am 09:55
Zuletzt bearbeitet von Sebbl, 31.05.2008 am 09:32
5 Kommentare , 7778 Betrachtungen

Dieser Text steht unter der GNU-Lizenz für freie Dokumentation


 

Lesezeichen

Stichworte
hover, tags

Artikel-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.

Gehe zu
Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DropDown mit a:hover Hellraiser666 Skriptsuche 17 25.01.2008 18:29
hover in ms explorer Basilio CSS 2 10.01.2008 09:09
CSS Hover mit Php und JS ?! DarkDevine JavaScript 2 15.10.2007 14:42
hover im ie narphi CSS 3 23.12.2006 10:15
Hover im IE gravedigger CSS 6 23.06.2006 01:11


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:57 Uhr.


Powered by vBulletin® Version 3.8.8 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Powered by NuWiki v1.3 RC1 Copyright ©2006-2007, NuHit, LLC