nicht angemeldet
Hallo,
ich habe folgendes Problem: Ich will ein Menü öffnen sobald man mit der Maus über einen Link hovert. Solange sich die Maus dann auf diesem Menü befindet, soll es natürlich auch noch geöffnet bleiben. Das ganze habe ich so realisiert, dass bei einem Hover über den Link und über das Menü, dieses eingeblendet wird, in der Callbackmethode wird es wieder ausgeblendet.
Das funktioniert soweit auch gut. Das Problem ist jetzt nur: Wenn man über den Link hovert, sich das Menu öffnet und man die Maus auf dem direkten Weg nach unten in den unteren Bereich des Menüs bewegt, befindet sich der Mauszeiger für kurze Zeit nichtmehr über Link und nichtmehr über dem Menü -> Menü wird ausgeblendet.
Jemand ne Idee, wie ich das Problem lösen kann? Mit einem Delay/Timeout beim hide?
Hier mal noch mein Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<style>
a{
float:left;
}
.menu{
background:grey;
width:100px;
height:400px;
float:left;
display:none;
}
</style>
</head>
<body>
<a href="#">link</a>
<div class="menu"></div>
<script type="text/javascript">
$("a").hover(function(){
showMenu();
}, function(){
hideMenu();
});
$(".menu").hover(function(){
showMenu();
}, function(){
hideMenu();
});
function showMenu(){
$(".menu").show();
}
function hideMenu(){
$(".menu").hide();
}
</script>
</body>
</html>