Javascript 检测两个相交圆形图元的悬停_Javascript_Jquery_Html_Css

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

javascript jquery html css

Javascript 检测两个相交圆形图元的悬停,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在jsFiddle（）上做了一个例子，目的是想知道什么时候结束，比如说红色和蓝色圆圈之间的交点。但问题是，每次我到达十字路口时，红色圆圈的“结束”一类就被删除了。 Html: JavaScript: $(document).ready(function () { $("#Div1").hover( function () { $(this).addClass("is-over"); }, function () { $(this).

我在jsFiddle（）上做了一个例子，目的是想知道什么时候结束，比如说红色和蓝色圆圈之间的交点。但问题是，每次我到达十字路口时，红色圆圈的“结束”一类就被删除了。 Html:

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

（函数（$）{
$.mlp={x:0，y:0}；//鼠标最后位置
函数documentHandler（）{
var$current=this==document？$（this）：$（this.contents（）；
$current.mousemove（函数（e）{jQuery.mlp={x:e.pageX，y:e.pageY}）；
$current.find（“iframe”）.load（documentHandler）；
}
$（documentHandler）；
$.fn.ismouseover=函数（在此之上）{
var结果=假；
此.eq（0）.each（函数（）{
var$current=$（this）.is（“iframe”）？$（this.contents（）.find（“body”）：$（this）；
var offset=$current.offset（）；
结果=offset.left$.mlp.x&&
年收入最高的美元；
});  
返回结果；
};  
})（jQuery）；
$（文档）.ready（函数（）{
$（“#myDiv”）.mousemove(
函数（）{
$（“#myDiv”）.children（“span”）.each（function（）{
if（$（this）.ismouseover（））
$（此）.addClass（“已结束”）；
其他的
$（this.removeClass（“结束”）；
});
});
});

下面是一个解释：

我不知羞耻地从你的电脑上偷了

.ismouseover（）

代码，并根据你的需要重新调整了它的用途。从那里我使用了一个

.mousemove（）

事件，每次你在父容器中时都会触发，你可以在中看到，需要指定高度和宽度参数，以确保它有一个边界框

最后，我只需检查哪些圆已结束，并将

is over

类添加到它们中。小提琴以安东的作品为基础，尽管它提供了交叉点支撑，而不是将一把小提琴移到顶部

希望这有帮助。

给你