zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden IE :hover/:focus auf alle Elemente (expression)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.10.2005, 23:03
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard 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
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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.10.2005, 08:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 20.02.2005
Beiträge: 1.045
Tigereye befindet sich auf einem aufstrebenden Ast
Standard

Coole Sache! Respekt, funktioniert perfekt!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.10.2005, 09:47
Benutzerbild von Gumbo
XHTMLforum-Kenner
 
Registriert seit: 22.08.2004
Ort: Trier
Beiträge: 2.740
Gumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekanntGumbo ist jedem bekannt
Standard

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.
__________________
Markus Wulftange
Mit Zitat antworten
  #4 (permalink)  
Alt 30.10.2005, 20:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.034
Swoop befindet sich auf einem aufstrebenden Ast
Standard

Gute Sache, ulle
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
  #5 (permalink)  
Alt 06.01.2006, 12:03
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard

sehr gut
danke vielmals
Mit Zitat antworten
  #6 (permalink)  
Alt 10.01.2006, 18:43
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard

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/
Mit Zitat antworten
  #7 (permalink)  
Alt 06.02.2006, 01:40
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard

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]
Mit Zitat antworten
  #8 (permalink)  
Alt 06.02.2006, 22:54
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

]] 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>
Mit Zitat antworten
  #9 (permalink)  
Alt 10.02.2006, 16:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard

achso ok, danke für den hinweis
Mit Zitat antworten
Sponsored Links
Antwort

Themen-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.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Elemente nebeneinander mit max Höhe des umgebenden Elementes ShadowDeath CSS 1 27.08.2011 21:00
[Formular] Semantisch richtige Elemente verwenden Zeussi (X)HTML 9 07.09.2010 00:02
Elemente unbrauchbar bei absolute Bara CSS 0 28.07.2010 06:18
Mehr (unnötige) Elemente oder weniger Flexibilität? Pleex CSS 3 13.05.2009 22:17
Welche Positionierung für elemente eines Formulas? bastien CSS 3 01.01.2007 22:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:55 Uhr.