0

我有一个带有绿色子元素的红色 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()？

这是我的小提琴

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

4

2 回答 2

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


});
});

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

于 2013-06-25T14:18:46.770 回答
0

而不是mousemove尝试mouseover

演示

于 2013-06-25T13:25:56.303 回答