Hey,
Ik heb een hover effect ingebouwd in mijn website waarmee informatie wordt getoond bij een mouseover van een betreffende button.
Nu heb ik om de hover ook te laten werken in IE gebruik gemaakt van onderstaande hover.htc bestand:
HTML code:
CSS code:
Nu werkt het allemaal mooi in Firefox en IE < 7, maar om één of andere reden werkt het niet IE7.
Weet iemand hoe dit komt?
Ik heb een hover effect ingebouwd in mijn website waarmee informatie wordt getoond bij een mouseover van een betreffende button.
Nu heb ik om de hover ook te laten werken in IE gebruik gemaakt van onderstaande hover.htc bestand:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| <attach event="ondocumentready" handler="parseStylesheets" />
<script>
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) || !style) return;
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:(hover|active).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp
('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
};
}
function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type, e.handler);
}
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) {
var element = doc.getElementById(identify[1]);
return element? [element]:nodes;
}
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
}
return nodes;
}
</script> |
HTML code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <ul class="loginmenunav">
<li id="login1"><a href="http://www.adigo.nl/login/mindmap">MINDMAP</a>
<div class="loginmenunav_tekst1">
Bekijk hier uw persoonlijke Mindmap, welke Adigo gebruikt om gegevens met u uit
te wisselen.
</div>
</li>
<li id="login2"><a href="http://www.adigo.nl/login/wijzigen">GEGEVENS WIJZIGEN</a>
<div class="loginmenunav_tekst2">
Wijzig uw persoonlijke gegevens, zoals uw e-mailadres en / of wachtwoord.
</div>
</li>
<li id="login3"><a href="http://www.adigo.nl/login/uitloggen">UITLOGGEN</a>
<div class="loginmenunav_tekst3">
Log uzelf uit op de website. U kunt dan geen gebruik meer maken van de extra
functies totdat u zich weer heeft ingelogd op de website.
</div>
</li>
</ul> |
CSS code:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| .loginmenunav_tekst1, .loginmenunav_tekst2 {
position: absolute;
width: 326px;
left: -999em;
background-color: #E9E9E9;
border: 1px solid #004168;
font-family: Arial, Helvetica;
font-size: 11px;
color: #4C4C4C;
font-weight: normal;
padding: 3px 3px 3px 3px;
}
.loginmenunav_tekst3 {
position: absolute;
width: 285px;
left: -999em;
background-color: #E9E9E9;
border: 1px solid #004168;
font-family: Arial, Helvetica;
font-size: 11px;
color: #4C4C4C;
font-weight: normal;
padding: 3px 3px 3px 3px;
}
#login1:hover .loginmenunav_tekst1 {
left: auto;
}
#login2:hover .loginmenunav_tekst2 {
left: auto;
}
#login3:hover .loginmenunav_tekst3 {
left: auto;
} |
Nu werkt het allemaal mooi in Firefox en IE < 7, maar om één of andere reden werkt het niet IE7.
Weet iemand hoe dit komt?
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
