Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 30.10.2005, 00:03
ulle ulle ist offline
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