Ik ben bezig met een website waarin ik jquery gebruik. Met jquery laat ik de hele website van kleur veranderen dus ook menu klikjes. Deze moeten echter wel hoveren en daarvoor heb ik een css hover gebruikt. Diezelfde hover gaat echter verloren naar een animate met jquery.
de hele code is als volgt
en de jquery zijn hier
hoe los ik heb probleem met de hovers op?
de hele code is als volgt
HTML:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Klusservice veenendaal</title> <link href="stijl.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" media="all" href="scrollbalken/jScrollPane.css" /> <script type="text/javascript" src="scrollbalken/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="scrollbalken/jquery.mousewheel.js"></script> <script type="text/javascript" src="scrollbalken/jScrollPane.js"></script> <script type="text/javascript" src="scrollbalken/jquery.color.js"></script> <script type="text/javascript"> $(function() { $('#inhoud').jScrollPane({showArrows:true}); } ); function click() { $('#paginaachtergrond').animate({ backgroundColor: '#FFFFFF'}, "400") $('#paginainhoud').animate({ color: '#000000'}, "400") $('#paginainhoud p a, #kleurpaneel a').animate({ color: '#FF0000'}, "400") $('#menu li').animate({ backgroundColor: '#FFFFF'}, "400") $('#menu a').animate({ color: '#000000'}, "400") $('h1').animate({ color: '#FF0000'}, "400") } </script> </head> <body> <img src="afbeeldingen/achtergrond.jpg" alt="achtergrond" name="achtergrond" id="achtergrond" /> <div id="paginaachtergrond"></div> <div id="paginainhoud"> <div id="kleurpaneel"><a href="#" onclick="click()">white</a></div> <ul id="menu"> <li><a href="#Home">Home</a></li> <li><a href="#Infrotmatie">Infrotmatie</a></li> <li><a href="#Ons_team">Ons team</a></li> <li><a href="#Reacties">Reacties</a></li> <li><a href="#Contact">Contact</a></li> </ul> <div id="inhoud"> <a name="Home" id="Home"></a><h1>Home</h1> <p><img src="http://www.klusserviceveenendaal.nl/images/foto.png" width="126" height="112" alt="plaatje" />Klusservice Veenendaal kan een hoop van uw klussen uit <a href="#">handen</a> nemen. Wij kunnen uw tuin onderhouden, uw auto wassen, uw was strijken en vele andere werkzaamheden doen, waar u zelf geen tijd voor heeft. Voor meer informatie over onze diensten kunt u klikken op de hierboven staande kopjes:3 Tuinwerk, Strijken, Autowassen en Overige.</p> <p>Klusservice Veenendaal kan een <a href="#">hoop</a> van uw klussen uit handen nemen. Wij kunnen uw tuin onderhouden, uw auto wassen, uw was strijken en vele andere werkzaamheden doen, waar u zelf geen tijd voor heeft. Voor meer informatie over onze diensten kunt u klikken op de hierboven staande kopjes: Tuinwerk, Strijken, Autowassen en Overige.</p> <p>Blablablablablablablablablabla blablablabla blablablabla bla bla bla bla bla bla bla bla bla bal ballblabla blablablabla bal bal balballbalblablalbalba bla bla bla bla bla bla bla bla</p> <p>blablablabalbalbalbal bal bal bal balbl abl alb al balbal bal bal balbalbal bal bal blalbalbalbalbalblablalblbal blalbal bal lbal bal bal llbalblal bla lballal balblalb albl ab lalballbalblablalbal </p> <p>blablalbalblablalbalba blabla bla blbalbalblaal ball blalbalbalblablalbablalblalbalblalba</p> <p>blalbalbalbal</p> <p>balbalbalbal balb bla bla bal</p> <p> </p> <p>balbalbalala</p> <p>blablablabla</p> <p>blablablabla</p> <p>blablablabla</p> <p>blablablabla</p> <a name="Infrotmatie" id="Infrotmatie"></a><h1>Infrotmatie</h1> <p>Hallo balbalbalbalbalbalbal blablabalbal blbalbalbalba blabalbalbal</p> <a name="Ons_team" id="Ons_team"></a><h1>Ons Team</h1> <p>Hallo dit zijn ze</p> <a name="Reacties" id="Reacties"></a><h1>Reacties</h1> <p>blaat blaat blaat blaat blabalbalbla bblaat blaat blaat blaat blaat blaat blaat blaat.</p> <p>blaat blaat blaat blaat blaat blaat blaat blaast balt.</p> <a name="Contact" id="Contact"></a><h1>Contact</h1> <p>Formulier?</p> </div> </div> </body> </html> |
en de jquery zijn hier
code:
1
2
3
4
5
6
7
8
| function click() {
$('#paginaachtergrond').animate({ backgroundColor: '#FFFFFF'}, "400")
$('#paginainhoud').animate({ color: '#000000'}, "400")
$('#paginainhoud p a, #kleurpaneel a').animate({ color: '#FF0000'}, "400")
$('#menu li').animate({ backgroundColor: '#FFFFF'}, "400")
$('#menu a').animate({ color: '#000000'}, "400")
$('h1').animate({ color: '#FF0000'}, "400")
} |
hoe los ik heb probleem met de hovers op?
[ Voor 0% gewijzigd door BtM909 op 09-12-2009 17:27 ]
:strip_exif()/u/27216/bosmonster_dropdown.gif?f=community)
) testcase online?
:strip_icc():strip_exif()/u/5964/crop56503163e97a5.jpeg?f=community)
/u/102105/crop56f481fe1f74f.png?f=community)
:strip_icc():strip_exif()/u/206968/325134.jpg?f=community)
(noch op mn scherm)
ik denk dat je er verstandig aan doet om eerst maar eens wat tutorials te doorlopen van jQuery, CSS, HTML en de combinatie daarvan. Momenteel zitten er nog veel te veel inconsistentie en fouten in je code.
/u/107051/jeroenmadtrix60.png?f=community)
:strip_exif()/u/14385/malibu.gif?f=community)
/u/7685/ruinmytune-60x60.png?f=community)
knop gebruiken