我正在使用几个div,它们之间没有边距/空格,我在第一次输入鼠标后无法触发mouseleave / enter事件 .
换句话说,我希望触发事件而不必A)将鼠标移回页面主体,或者B)在每个div之间设置边距,使鼠标有机会在进入之前越过身体一个新的div .
所有发生的事情是我正在切换目标div的背景图像并且有一个子div幻灯片,它最终会有文本/链接 .
jQuery的:
$('body').mouseenter(function(event) {
var invisible = $(event.target).children('.info').is(':hidden');
var goDown = $(event.target).children('.info').slideDown(125);
if( $(event.target).is('#cube1') && invisible) {
goDown;
$(event.target).css('background', 'url(images/waves.jpg)');
}
else if ( $(event.target).is('#cube2') && invisible) {
goDown;
$(event.target).css('background', 'url(images/amazon.jpg)');
}
else if ( $(event.target).is('#cube3') && invisible) {
goDown;
$(event.target).css('background', 'url(images/lava.jpg)');
}
else if ( $(event.target).is('#cube4') && invisible) {
goDown;
$(event.target).css('background', 'url(images/everest.jpg)');
}
else {
}
});
$('body').mouseleave(function(event) {
var visible = $(event.target).children('.info').is(':visible');
var goUp = $(event.target).children('.info').slideUp(125);
if( $(event.target).is('#cube1') && visible) {
goUp;
$(event.target).css('background', 'url(images/wavesBW.jpg)');
}
else if ( $(event.target).is('#cube2') && visible) {
goUp;
$(event.target).css('background', 'url(images/amazonBW.jpg)');
}
else if ( $(event.target).is('#cube3') && visible) {
goUp;
$(event.target).css('background', 'url(images/lavaBW.jpg)');
}
else if ( $(event.target).is('#cube4') && visible) {
goUp;
$(event.target).css('background', 'url(images/everestBW.jpg)');
}
else {
}
});
CSS:
.cube {
background-color:#333;
height:175px;
width:175px;
border:2px solid #999;
float:left;
margin:0 0 0 0;
}
.info {
background-color:#CCC;
border-bottom:4px solid #999;
position:relative;
width:175px;
height:50px;
display:none;
opacity:0.85;
}
HTML:
<body>
<div class="cube" id="cube1">
<div class="info">
</div>
</div>
<div class="cube" id="cube2">
<div class="info">
</div>
</div>
<div class="cube" id="cube3">
<div class="info">
</div>
</div>
<div class="cube" id="cube4">
<div class="info">
</div>
</div>
</body>