problem with hover.
problem with hover.
Ive worked a lot of hours on this script. But it doesnt want to run.
Here my script.
- $(document).ready(function($){
- $("#networklist-dropdown, #networkbutton").hover(hoverOver,hoverOut).bind('click', click);;
-
- function hoverOver() {
- if (this.$timer) {
- clearTimeout(this.$timer);
- }
- if (!$("#networklist-dropdown").is(':visible')) {
- $("#networklist-dropdown").fadeIn('fast').hover(hoverOver,hoverOut);
- }
-
- }
- function hoverOut() {
- if(this.$timer) {
- clearTimeout(this.$timer);
- }
- if($(this).is(':visible')) {
- this.$timer = setTimeout(function() {
- $("#networklist-dropdown").fadeOut('fast');
- }, 800);
- }
- }
-
- function click(e) {
- if(this.$timer) {
- clearTimeout(this.$timer);
- }
- this.$timer = setTimeout(function() {
- $("#networklist-dropdown").fadeOut('fast');
- }, 800);
-
- }
- });
Here my html.
- <div class="content"><a id="networkbutton" href="#"><img src="/sites/blutbann.de/modules/ggp_networklist/images/networkbutton.png"></a>
- <div id="networklist-dropdown" class="withDropDown" style="display: none; position: absolute; z-index: 999999;">
- <div style="float: left;">
- <span>Unsere Seiten:</span>
- <ul>
- <li><a href="http://www.example-box.de" target="_blank">example-Box</a></li>
- <li><a href="http://www.agame.de" target="_blank">A</a></li>
- <li><a href="http://www.b-game.de" target="_blank">B</a></li>
- <li><a href="http://www.d-game.de" target="_blank">C</ a></li>
- </ul>
- </div>
- <div style="float: left;">
- <span>Partner:</span>
- <ul>
- <li><a href="http://www.ddd.de" target="_blank">ddd</a></li>
- </ul>
- </div>
- <div style="float: left;">
- <span>Foren:</span>
- <ul>
- <li><a href="http://www.xyzexampleport.com/forumdisplay.php?f=542" target="_blank">Aliens vs. Predator</a></li>
- </ul>
- </div>
- </div>
- </div>
The div #networklist-dropdown should be opend when user hovered #networkbutton, but #networklist-dropdown
shouldn't disappear when user moves on it.