Hallo,
ich möchte eine Liste aus Elementen darstellen. Wenn man ein Element hovert, klappt eine Extra-Info aus. Also soetwas ähnliches wie Dropdown, nur nicht als Menü.
Nun habe ich 2 Probleme:
1. Die Info klappt wieder ein, wenn ich mit der Maus über sie fahre. Ich verstehe aber nicht warum; ich selektiere den übergeordneten Punkt, und dessen Box umschließt ja natürlich auch die Extrainformation. Das mouseout Event sollte doch also nicht greifen, wenn ich die Extra-Info hover, da diese immernoch im selektierten Element liegt. Oder sehe ich etwas falsch?
2. Wenn man wild mit der Maus hin und her fährt, führt der Browser alle hover-events noch nachträglich aus. Da das mit einer Animation ausgeführt wird, kann das dazu führen, dass der Browser eine halbe Minute lang die Infos ein und ausfährt, weil er jedes Event abarbeitet. Wie kann ich das verhindern? Gibt es eine Begrenzung für die Zahl der Hoverevents pro Sekunde?
mein Code sieht so aus:
Das Javascript wiefolgt:
MfG xZap
ich möchte eine Liste aus Elementen darstellen. Wenn man ein Element hovert, klappt eine Extra-Info aus. Also soetwas ähnliches wie Dropdown, nur nicht als Menü.
Nun habe ich 2 Probleme:
1. Die Info klappt wieder ein, wenn ich mit der Maus über sie fahre. Ich verstehe aber nicht warum; ich selektiere den übergeordneten Punkt, und dessen Box umschließt ja natürlich auch die Extrainformation. Das mouseout Event sollte doch also nicht greifen, wenn ich die Extra-Info hover, da diese immernoch im selektierten Element liegt. Oder sehe ich etwas falsch?
2. Wenn man wild mit der Maus hin und her fährt, führt der Browser alle hover-events noch nachträglich aus. Da das mit einer Animation ausgeführt wird, kann das dazu führen, dass der Browser eine halbe Minute lang die Infos ein und ausfährt, weil er jedes Event abarbeitet. Wie kann ich das verhindern? Gibt es eine Begrenzung für die Zahl der Hoverevents pro Sekunde?
mein Code sieht so aus:
HTML:
<ul>
<li class="big">1
<ul class="hide">
<li></li>
</ul>
</li>
<li class="big">2
<ul class="hide">
<li></li>
</ul>
</li>
Code:
$(document).ready(function() {
var h = $(".hide");
h.css({
"display": "none"
});
h.slideUp();
$('.big').mouseover(function() {
var a = $(this).children("ul.hide");
a.slideDown();
//showIt(a);
});
$('.big').mouseout(function() {
var a = $(this).children("ul.hide");
a.slideUp();
});
}); //END .ready()MfG xZap
