Detect Hover for two intersecting Circular elements

Question

i did an example on jsFiddle ( http://jsfiddle.net/aRWhm/ ) , the idea is to know when i'm over lets say the intersection between the red and the blue circle. but the problem is that every time i reach the intersection, the class "is-over" of the red circle is removed. 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");
    }
);
});

I'd suggest that you should be using proper graphics - ie SVG - for this rather than html+css. — Spudley, Sep 11 '13 at 13:47
Try [Raphael.js](http://raphaeljs.com/); it's a nice JS library for drawing SVG graphics on your page and interracting with them. — Spudley, Sep 11 '13 at 13:54
d3 is good for SVG manipulation as well, although I don't really like it for its stated data purpose. — Jason Nichols, Sep 11 '13 at 13:56

score 1 · Accepted Answer · edited May 23 '17 at 11:56

Here you go.

First, the Code:

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

Now an explanation:

I stole the .ismouseover() code shamelessly from this answer by Ivan Castellanos and repurposed it to your needs. Form there I used a .mousemove() event to fire every time you're in the parent container, which you can see in this fiddle needed to be given height and width parameters to ensure that it had a bounding box.

Lastly I simply check to see which circles you're over, and add the is-over class to them. The Fiddle is based off Anton's work, although it provides intersection support instead of moving one to the top.

Hope this helps.

Detect Hover for two intersecting Circular elements

1 Answers1