Heim > Artikel > Web-Frontend > jquery: Warum sprudelt das Hover-Ereignis nicht?
jquery: Warum sprudelt das Hover-Ereignis nicht?
- 黄舟Original
- 2017-06-26 11:20:111955Durchsuche
So verhindern Sie, dass JQuery-Hover-Ereignisse sprudeln
Die Div-Hintergrundfarbe ändert sich, wenn die Maus über jedes Div fährt, aber ich möchte nicht, dass das übergeordnete Div des eingebetteten Divs seine Farbe ändert.
Ich habe gehört, dass es sich um einen Blasenvorfall handelte, aber ich verstehe das nicht.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function div_hover(){
$("div").hover(
function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);
}
$(function(){
div_hover();
});
</script>
<style type="text/css">
.box1{background:green;width:400px;height:400px;}
.box2{background:yellow;width:300px;height:300px;}
.box3{background:#cc3333;width:200px;height:200px;}
.hover{background:#33cc33}
</style>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>$("div").hover(
function(e){
$(this).addClass("hover");
e.stopPropagation(); //这里
},
function(e){
$(this).removeClass("hover");
e.stopPropagation(); //这里
}
);Beachten Sie, dass die Funktion Ereignisbehandlung ein Ereignis--Objekt e
e.stopPropagation( ); Würde es nicht funktionieren, wenn ich es direkt einfüge? Ich habe vergessen, Ihnen eine laufende Version im zweiten Stock zu geben.
Das Ergebnis ist sehr kompliziert.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function div_hover(){
var levels = {};
var min = 100, max = 0;
var change = function() {
var q = 0;
for (var p in levels) {
$(levels[p]).removeClass("hover");
q = Math.max(q, p);
}
$(levels[q]).addClass("hover");
};
var getLevel = function(element) {
var level = 0;
for (var parent = element; parent.parentNode; parent = parent.parentNode) level++;
return level;
};
$("div").hover(
function(){
levels[getLevel(this)] = this;
change();
},
function(){
delete levels[getLevel(this)];
$(this).removeClass("hover");
change();
}
);
}
$(function(){
div_hover();
});
</script>
<style type="text/css">
.box1{background:green;width:400px;height:400px;}
.box2{background:yellow;width:300px;height:300px;}
.box3{background:#cc3333;width:200px;height:200px;}
.hover{background:#33cc33}
</style>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>Das Hover-Ereignis wird nicht verwendet, aber der Effekt ist Dasselbe. Sie können sich auf
<!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>
<title></title>
<style type="text/css">
.box1{background:green;width:400px;height:400px;}
.box2{background:yellow;width:300px;height:300px;}
.box3{background:#cc3333;width:200px;height:200px;}
.hover{background:#33cc33}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("div").mouseover(function(e) {
$(this).addClass("hover");
e.stopPropagation();
});
$("div").mouseout(function(e) {
$(this).removeClass("hover");
e.stopPropagation();
});
});
</script>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
</body>
</html>beziehen. Haha, die drei Effekte sind unterschiedlich. interessant.
Das obige ist der detaillierte Inhalt vonjquery: Warum sprudelt das Hover-Ereignis nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!