1

我在 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");
    }
);
});
4

1 回答 1

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

现在解释一下：

我从Ivan Castellanos 的这个答案.ismouseover()中无耻地窃取了代码，并将其重新用于您的需要。在那里，每当您在父容器中时，我都会使用一个事件来触发，您可以在此小提琴中看到需要为其提供高度和宽度参数以确保它具有边界框。.mousemove()

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

希望这可以帮助。

于 2013-09-11T14:19:44.003 回答