css - 使子元素在其父元素的 `mouseleave` 上消失

Question

我有一个带有绿色子元素的红色 div，当鼠标悬停在它的父元素上时，绿色元素会移动。很简单。

HTML:

<div class="big">
    <div class="small"></div>
</div>

CSS:

.big {
    position: relative;
    width: 200px; height: 200px;
    margin: 20px auto;
    background: red;
}

.big:hover .small {
    opacity: 1;
}

.small {
    position: absolute;
    top: 0; left: 0;
    width: 50px; height: 50px;
    background: green;
    opacity: 0;
}

JavaScript:

$('.big').on('mousemove', function (e) {

    var $this = $(this),
        small = $this.find('.small'),
        offset = $this.offset(),
        cursorX = e.pageX - offset.left,
        cursorY = e.pageY - offset.top,
        smallX = cursorX - small.width() / 2,
        smallY = cursorY - small.height() / 2;

    $('.small').css({
        top: smallY,
        left: smallX
    });

});

如何让绿框离开红框后消失？ :hover 在 css 中不起作用，因为绿色 div 是红色 div 的一部分(我猜)，所以光标永远不会真正离开它。只有当您非常快速地移动鼠标时，绿色 div 才能跟不上光标并消失。也许添加一些具有特定定位的包装元素可以解决问题？或者类似 jQuery stopPropagation() 的东西？

这是我的 Fiddle

更新:这是updated code ，根据用户 nevermind 的建议。我添加了一个过渡，它按照我的意愿消失了，但现在还有其他问题。当光标快速移出红框时，绿框停留在其父框的边界。

Answer 1

我想这就是你想要的:

http://jsbin.com/obewaz/1/

http://jsbin.com/obewaz/1/edit

相同的 html/css，jquery 中的一些添加:

$(document).ready(function() {

$('.big').on('mousemove', function (e) {



    var $this = $(this),
        smalle = $this.find('.small'),
        offset = $this.offset(),
        position=smalle.position(),
        cursorX = e.pageX - offset.left,
        cursorY = e.pageY - offset.top,
        smallX = cursorX - smalle.width() / 2,
        smallY = cursorY - smalle.height() / 2;

    $('.small').css({
        top: smallY,
       left: smallX
    });

console.log(position);   

if(position.left<0 || position.left>150 || position.top<0 || position.top>150) {
    $('.small').css('display','none');
}
else {

$('.small').css('display','block');
}


});
});

当然，您可以稍微更改/调整最后一个条件下的值以满足您的需要。想法是:跟踪小盒子的位置，当它在大盒子的“外面”时 - 隐藏它。