|
|||
![]()
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 ![]() 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>
__________________
</ulle> |
Sponsored Links |
|
||||
![]()
Eine clevere Idee. Es wundert mich fast schon nicht mehr, dass der Internet Explorer da mitmacht:
Zitat:
__________________
Markus Wulftange |
|
|||
![]()
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/ |
|
|||
![]()
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 = '';") ); } 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');") ); } |
|
|||
![]()
]] 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!!
__________________
</ulle> |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Elemente nebeneinander mit max Höhe des umgebenden Elementes | ShadowDeath | CSS | 1 | 27.08.2011 22:00 |
[Formular] Semantisch richtige Elemente verwenden | Zeussi | (X)HTML | 9 | 07.09.2010 01:02 |
Elemente unbrauchbar bei absolute | Bara | CSS | 0 | 28.07.2010 07:18 |
Mehr (unnötige) Elemente oder weniger Flexibilität? | Pleex | CSS | 3 | 13.05.2009 23:17 |
Welche Positionierung für elemente eines Formulas? | bastien | CSS | 3 | 01.01.2007 23:31 |