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课程添加到其中。小提琴是基于安东的作品，虽然它提供交叉点支持而不是移动到顶部。

希望这有帮助。

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

1 个答案: