nicht angemeldet
jQuery -> hover merkwürdiges Verhalten im Internet Explorer
Hallo,
ich habe den folgenden Code, der eine Art Menü (grünes Div) zeigt, wenn man über das rote div hovert. Auch solange man sich mit der Maus über den Menü selbst befindet, soll es sichtbar bleiben. In Chrome funktioniert alles wunderbar. Nur wenn ich in Internet Explorer etwas aus der dropdown box auswähle, dann befindet sich der Mauszeiger wohl nichtmehr direkt auf dem roten Div und das Menü wird geschlossen. Kennt jemand einen Workaroud für dieses Problem?
Viele Grüße
Luxury
<!DOCTYPE HTML>
<html>
<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 type="text/css">
.test{
background:red;
width:200px;
height:100px;
}
.menu{
position:relative;
top:100px;
height:300px;
width:200px;
background:green;
display:none;
}
</style>
<body>
<div class="test">
<div class="menu">
<select>
<option>o1</option>
<option>o2</option>
</select>
</div>
<script type="text/javascript">
$('.test').hover(function(){
$('.menu').show();
}, function(){
$('.menu').hide();
});
$('.menu').hover(function(){
$('.menu').show();
}, function(){
$('.menu').hide();
});
</script>
</body>
</html>
-
Hallo,
hover arbeitet mit mouseover- und mouseout-Events. Diese passieren nicht nur beim Überfahren des Elements, sondern zudem beim Überfahren der Kindelemente. Die Ereignisse steigen auf (Bubbling) und lösen dort das Öffnen/Schließen auf, obwohl die Maus gar nicht den Bereich des Elements verlassen hat.
Als Alternative kannst du mit den Events mouseenter und mouseleave arbeiten:
http://api.jquery.com/mouseenter/
http://api.jquery.com/mouseleave/Diese bubblen nicht und passieren erst, wenn die Maus wirklich das Element verlässt.
Mathias
-
Hallo,
hover arbeitet mit mouseover- und mouseout-Events. Diese passieren nicht nur beim Überfahren des Elements, sondern zudem beim Überfahren der Kindelemente. Die Ereignisse steigen auf (Bubbling) und lösen dort das Öffnen/Schließen auf, obwohl die Maus gar nicht den Bereich des Elements verlassen hat.
Als Alternative kannst du mit den Events mouseenter und mouseleave arbeiten:
http://api.jquery.com/mouseenter/
http://api.jquery.com/mouseleave/Diese bubblen nicht und passieren erst, wenn die Maus wirklich das Element verlässt.
Mathias
Hallo, bist du sicher, dass das Problem mit dem Bubbling zusammenhängt? Ich denke eher, dass er die Combobox dann nicht mehr als Bestandteil des Divs sieht?
Trotzdem habe ich deinen Vorschlag ausprobiert. Leider zeigt der Code das gleiche Verhalten wie zuvor auch.
Viele Grüße
Luxury<!DOCTYPE HTML> <html> <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 type="text/css"> .test{ background:red; width:200px; height:100px; } .menu{ position:relative; top:100px; height:300px; width:200px; background:green; display:none; } </style> <body> <div class="test"> <div class="menu"> <select> <option>o1</option> <option>o2</option> </select> </div> <script type="text/javascript"> $('.test').mouseenter(function(){ $('.menu').show(); }); $('.test').mouseleave(function(){ $('.menu').hide(); }); $('.menu').mouseenter(function(){ $('.menu').show(); }); $('.menu').mouseleave(function(){ $('.menu').hide(); }); </script> </body> </html>-
Hi,
Hallo, bist du sicher, dass das Problem mit dem Bubbling zusammenhängt? Ich denke eher, dass er die Combobox dann nicht mehr als Bestandteil des Divs sieht?
wer er?
Abgesehen davon, dass Du ".menu" nicht sauber schliesst, hast Du einen Wirrwar von Event-Zuweisungen.Es ist meistens nötig, zu prüfen, ob sich auslösendes Element innerhalb des Containers befindet - eben wegen des Geblubbers. Offenbar arbeitet hier aber jquerys mouseleave nicht sauber.
Ggf hilft Dir sowas, jetzt nur schnell notiert:
$('.test').hover(
function(){
$('.menu', this).show();
},
function(e){
if(
isinside ( $('.menu', this).get(0), $(e.target).get(0)) &&
$(e.target).get(0) != $('.menu', this).get(0)) {
return
}
$('.menu', this).hide();
}
);
// geniale funktion
function isinside (container, containee) {
if (typeof container === "undefined") return false;
if (window.Node && Node.prototype && !Node.prototype.contains) {
Node.prototype.contains = function (arg) {
return !!(this.compareDocumentPosition(arg) & 16);
};
}
return container.contains(containee);
}Gruesse, Joachim
--
Am Ende wird alles gut.
-
-