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
    });

});

如果绿色框离开红色框时会如何消失？ css中的:hover不起作用，因为绿色div是红色的一部分（I quess），因此游标实际上永远不会离开它。只有当你快速移动它时，绿色div才能跟上光标和消光器。也许添加一些具有特定定位的包装元素就可以了？或类似jQuery stopPropagation()？

这是我的Fiddle

更新：此处为updated code，基于用户未提及的建议。我添加了一个转换，它会像我想要的那样消失，但现在还有其他问题。当光标快速移动到红色框外时，绿色框保持在其父级的边界处。

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');
}


});
});

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

Answer 2

而不是mousemove尝试mouseover

DEMO

让子元素消失在它的父母的'mouseleave`上

2 个答案: