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

Detect Hover for two intersecting Circular elements

本文关键字：元素 悬停 两个 检测      更新时间：2023-09-26

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

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

你去吧。

一、守则：

(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类添加到其中。小提琴基于安东的工作，尽管它提供了交叉点支撑而不是将一个移动到顶部。

希望这有帮助。

相关文章：