XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   IE :hover/:focus auf alle Elemente (expression) (http://xhtmlforum.de/showthread.php?t=37375)

ulle 29.10.2005 23:03

IE :hover/:focus auf alle Elemente (expression)
 
Inspiriert durch diesen Artikel kk-works.de /BLOG :hover für alle

Mit hilfe von Expression (JavaScript innerhalb von CSS) und Conditional Comment habe ich folgende Lösungen um dem IE ein wenig Gegenwart einzuhauchen. pseudo:hover für alle Elemente und pseudo:focus für fokusierbare Elemente sind somit auch im IE kleiner Version 7 möglich. Es wird kein zusätzlicher Markup, wie im obigen Artikel vorgeschlagen, benötigt.

Das TEST-Case stelle ich wie immer zur Verfügung :arrow:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/


*                        {
                        margin:  0;
                        padding: 0;
                       
                        border-collapse:collapse;
                        border-spacing: 0;
                        }

html[xmlns]        {
                        height : 100%;
                        padding-bottom : .005em;
                        }
                       
html,
body                {
                        color:                #000000;
                        background:        #EEEEEE;
                       
                        line-height: 1.45;
                        }

body                {
                        font-size:  100.01%;
                        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                        }


                       
div                        {
                        margin: 1em;
                        border: 1px solid #000000;
                        padding: 1em;
                                       
                        background-color: #CCCCCC;
                        }

                       
div:hover, .div-hover
                        {
                        background-color: #FFFFFF;
                        }



               
div.classname
                        {
                        background-color: #FF9922;
                        }
                       
div.classname:hover, div.classname-hover
                        {
                        background-color: #FFFF00;
                        }



                       
textarea        {
                        width: 30em;
                        height: 10em;
                       
                        margin: 1em;
                        border: 1px solid #000000;
                        padding: 1em;
                                       
                        background-color: #CCCCCC;
                        }
                       
textarea:focus, .textarea-focus
                        {
                        background-color: #3399FF;
                        }


/*]]>*/
</style>

<!--[if lt IE 7]>
        <style type="text/css">

div
                        {
                        ulle: expression(
                                this.onmouseover = new Function ("this.className = 'div-hover';"),
                                this.onmouseout  = new Function ("this.className = '';")
                                );
                        }       
                       
                       
div.classname
                        {
                        ulle: expression(
                                this.onmouseover = new Function ("this.className += ' classname-hover';"),
                                this.onmouseout  = new Function ("this.className = this.className.replace('classname-hover', '');")
                                );
                        }


textarea
                        {
                        ulle: expression(
                                this.onfocus = new Function ("this.className = 'textarea-focus';"),
                                this.onblur  = new Function ("this.className = '';")
                                );
                        }       

       
        </style>
<![endif]-->

</head><body>

<div>
        Microsoft Workshop zum Thema
       

        Diesem Container wird mittels Microsoft "expression" (= JavaScript innerhalb von CSS) eine Klasse zugewiessen
        bzw. entfernt. Genutzt werden dazu die Event-Handlern onmouseover und onmouseout.
</div>

<div class="classname">
        Mit dieser Technik können auch Klassen eine zusätzlich/weitere Klasse hinzugefügt bzw. entfernt werden.
        Die Spezifität bleibt erhalten.
</div>

<textarea>
        :focus für entsprechende Elemente ist auch eine leichte Übung mit den Event-Handlern onfocus und onblur
       
        ;-)
</textarea>

</body></html>


Tigereye 30.10.2005 08:28

Coole Sache! Respekt, funktioniert perfekt! 8)

Gumbo 30.10.2005 09:47

Eine clevere Idee. Es wundert mich fast schon nicht mehr, dass der Internet Explorer da mitmacht:
Zitat:

Zitat von [url=http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#parsing-errors
Rules for handling parsing errors[/url]]User agents must ignore a declaration with an unknown property.

Allerdings stört mich daran die zusätzliche Regeldeklarationen. Da finde ich Peter Nederlofs HTC-Lösung praktikabler.

Swoop 30.10.2005 20:25

Gute Sache, ulle ;)

insanic! 06.01.2006 12:03

sehr gut ;)
danke vielmals ;)

insanic! 10.01.2006 18:43

mit ulle's erlaubnis habe ich diese möglichkeit als 1 von 2 methoden auf meinem blog veröffentlicht, :hover und :focus zum laufen zu bringen:

http://www.jahlabs.de/blog/2006/01/1...us-auch-im-ie/

insanic! 06.02.2006 01:40

hm, mal ne frage. warum funktioniert das nicht:

Code:

  textarea {
                        funbase: expression(
                                this.onfocus = new Function ("this.className = 'textarea-focus';"),
                                this.onblur  = new Function ("this.className = '';")
                        );
                        funbase: expression(
                                this.onmouseover = new Function ("this.className = 'textarea-hover';"),
                                this.onmouseout  = new Function ("this.className = this.className.replace('textarea-hove', 'textarea');")
                                this.onfocus = new Function ("this.className = 'textarea-focus';"),
                                this.onblur  = new Function ("this.className = '';")
                        );
                }

und dsa ebenfalls auch nicht:

Code:

  textarea {
                        funbase: expression(
                                this.onfocus = new Function ("this.className = 'textarea-focus';"),
                                this.onblur  = new Function ("this.className = '';")
                        );
                        funbase: expression(
                                this.onmouseover = new Function ("this.className = 'textarea-hover';"),
                                this.onmouseout  = new Function ("this.className = this.className.replace('textarea-hove', 'textarea');")
                               
                        );
                }

wie kann ich mehrere dinger anwenden?[/code]

ulle 06.02.2006 22:54

]] umschreibst wirst Du einen Teilerfolg haben.

Jetzt hast Du das Problem mit der Reihenfolge/Rangfolge des Event-Händler, einmal onfocus und einmal onmouseover, welchen der IE vorzieht ist ungesichert!!

insanic! 10.02.2006 16:05

achso ok, danke für den hinweis :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:22 Uhr.

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

© Dirk H. 2003 - 2020