Tijden veranderen
Element overlapping zorgt voor event trigger (jquery)
Ik heb een probleempje met een div.
De html ziet er ongeveer zo uit:
html:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="container">
<div id="mydiv></div>
<a id="hidden"></a>
</div>
<div id="mydiv></div>
<a id="hidden"></a>
</div>
jquery:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$('#mydiv').live('mouseover mouseout',
function(event) {
if(event.type == 'mouseover') {
$('#hidden').show();
} else {
$('#hidden').hide();
}
}
);
function(event) {
if(event.type == 'mouseover') {
$('#hidden').show();
} else {
$('#hidden').hide();
}
}
);
css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#container {
position: relative;
width: 200px;
height: 200px;
}
#mydiv {
width: 100px;
height: 200px;
}
#hidden {
width: 100px;
height: 50px;
position: absolute;
top: 25px;
left: 50px;
display: none;
z-index: 10;
}
position: relative;
width: 200px;
height: 200px;
}
#mydiv {
width: 100px;
height: 200px;
}
#hidden {
width: 100px;
height: 50px;
position: absolute;
top: 25px;
left: 50px;
display: none;
z-index: 10;
}
Zoals je ziet, als je over mydiv hovert, zal hidden verschijnen en een deel van mydiv overlappen. Als je nu echter over het overlappende deel van hidden hovert, dan beginnen beide divs te flikkeren.
Als ik hidden in mydiv plaats, is het probleem opgelost. Echter dit wil ik absoluut niet.
Weet iemand waarom beide divs flikkeren?
Bij voorbaat dank,
Riccardo.
Toevoeging op 07/07/2011 11:30:13:
Opgelost, voor degenen met hetzelfde probleem:
gebruik zoiets als:
$(document).mouseover(function(e) {
if (e.target == $('#mydiv').get(0) || e.target == $('#hidden').get(0)) {
//
} else {
//
}
}
weet iemand waarom dit niet met de live functie werkt:
$(document).live('mouseover', function(event) { //etc
?
Bvd,
Riccardo.
Er zijn nog geen reacties op dit bericht.