Beste mensen,
Ik probeer de originele staat van een element terug te zetten. Ik heb een div element die met mouseover een groene border krijgt. Op moment dat er een mouseout plaats vindt moet deze de originele staat (dus rode border) weer terug krijgen. Dat lukt met de onderstaande code:
Dit hoeft natuurlijk niet alleen met borders te zijn maar kan ook zijn met andere style attributen of de content van de div moet weer hersteld worden etc. anders had ik alleen de style opgeslagen en niet het hele element.
Echter ga ik er met mijn muis nogmaals overheen gebeurd er helemaal niets.
Ik kan hier geen bestaande library voor gebruiken omdat ik er zelf een aan maken ben voor de fun. Bovenstaande code is ook snel in elkaar gemaakt om het probleem na te bootsen. Dit is de daadwerkelijke code:
Kan iemand mij helpen om dit probleem op te lossen?
Ik probeer de originele staat van een element terug te zetten. Ik heb een div element die met mouseover een groene border krijgt. Op moment dat er een mouseout plaats vindt moet deze de originele staat (dus rode border) weer terug krijgen. Dat lukt met de onderstaande code:
JavaScript:
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
| <div id="div" style="width:100px; height:100px; background:#000; border:10px solid green"></div> <script type="application/javascript"> var div = document.getElementById('div'); original(); div.onmouseover = function() { this.style.border = '10px solid red'; } div.onmouseout = function() { original(); } function original() { if(div.original) { div.parentNode.replaceChild(div.original, div); div.original = null; } else { div.original = div.cloneNode(true); } } </script> |
Dit hoeft natuurlijk niet alleen met borders te zijn maar kan ook zijn met andere style attributen of de content van de div moet weer hersteld worden etc. anders had ik alleen de style opgeslagen en niet het hele element.
Echter ga ik er met mijn muis nogmaals overheen gebeurd er helemaal niets.
Ik kan hier geen bestaande library voor gebruiken omdat ik er zelf een aan maken ben voor de fun. Bovenstaande code is ook snel in elkaar gemaakt om het probleem na te bootsen. Dit is de daadwerkelijke code:
JavaScript:
1
2
3
4
5
6
7
| $('div1').css({'border' : '10px solid red'}).origineel().bind('mouseover', function() { this.css({'border' : '10px solid green'}); }).bind('mouseout', function() { this.origineel(); }); |
Kan iemand mij helpen om dit probleem op te lossen?
