30.10.2005, 00: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  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 |
|
30.10.2005, 10:47
|
||||
|
||||
|
Eine clevere Idee. Es wundert mich fast schon nicht mehr, dass der Internet Explorer da mitmacht:
Zitat:
__________________
Markus Wulftange
|
|
10.01.2006, 19: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/
|
|
06.02.2006, 02: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 = '';")
);
}
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');")
);
}
|
|
06.02.2006, 23: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!!
__________________
</ulle>
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| 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 |
Linear-Darstellung
