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>
|
