javascript - 检测两个相交的圆形元素的悬停

Question

我在 jsFiddle ( http://jsfiddle.net/aRWhm/ ) 上做了一个例子，我的想法是知道我什么时候结束让我们说红色和蓝色圆圈之间的交集。 但问题是每次我到达十字路口时，红色圆圈的“结束”类都会被删除。 HTML:

<div>
    <span id="Div1"></span>
    <span id="Div2"></span>
    <span id="Div3"></span>
    <span id="Div4"></span>
</div>

CSS:

 div {
        display: block;
        margin: 0 auto;
        overflow: hidden;
        width: 950px;
    }
    span {
        display: block;
        position: absolute;
        opacity: 0.5;
        border-radius: 999px;
        z-index: 1;
    }
    #Div1 {
        background-color: #FF0000;
        height: 200px;
        left: 50px;
        top: 80px;
        width: 200px;
    }
    #Div2 {
        background-color: #0000FF;
        height: 150px;
        left: 40px;
        top: 230px;
        width: 150px;
    }
    #Div3 {
        background-color: #008000;
        height: 250px;
        left: 100px;
        top: 190px;
        width: 250px;
    }
    #Div4 {
        background-color: #FFFF00;
        height: 100px;
        left: 200px;
        top: 130px;
        width: 100px;
    }

JavaScript:

$(document).ready(function () {
$("#Div1").hover(
    function () {  
        $(this).addClass("is-over");
    },
    function () {
        $(this).removeClass("is-over");
    }
);
$("#Div2").hover(
    function () {
        $(this).addClass("is-over");
    },
    function () {
        $(this).removeClass("is-over");
    }
);
$("#Div3").hover(
    function () {
        $(this).addClass("is-over");
    },
    function () {
        $(this).removeClass("is-over");
    }
);
$("#Div4").hover(
    function () {
        $(this).addClass("is-over");
    },
    function () {
        $(this).removeClass("is-over");
    }
);
});

Answer 1

给你。

首先是代码:

(function($){ 
    $.mlp = {x:0,y:0}; // Mouse Last Position
    function documentHandler(){
        var $current = this === document ? $(this) : $(this).contents();
        $current.mousemove(function(e){jQuery.mlp = {x:e.pageX,y:e.pageY}});
        $current.find("iframe").load(documentHandler);
    }
    $(documentHandler);
    $.fn.ismouseover = function(overThis) {  
        var result = false;
        this.eq(0).each(function() {  
                var $current = $(this).is("iframe") ? $(this).contents().find("body") : $(this);
                var offset = $current.offset();             
                result =    offset.left<=$.mlp.x && offset.left + $current.outerWidth() > $.mlp.x &&
                            offset.top<=$.mlp.y && offset.top + $current.outerHeight() > $.mlp.y;
        });  
        return result;
    };  
})(jQuery);

$(document).ready(function () {
    $("#myDiv").mousemove(
        function() {
            $("#myDiv").children("span").each(function(){
                if($(this).ismouseover())
                    $(this).addClass("is-over");
                else
                    $(this).removeClass("is-over");
            });
        });
});

现在解释一下:

我厚着脸皮从this answer by Ivan Castellanos偷了.ismouseover()代码并根据您的需要重新调整它的用途。在那里，我使用了 .mousemove() 事件来触发每次你在父容器中，你可以在 this fiddle 中看到 需要给定高度和宽度参数以确保它有一个边界框。

最后，我只是简单地检查一下您结束了哪些圈子，并向它们添加了 is-over 类。 Fiddle 基于 Anton 的工作，尽管它提供交叉支持而不是将一个移动到顶部。

希望这对您有所帮助。