JavaScript

I have a div with two svg-elements inside, which are shown/hidden when hovering with the mouse. The mouseover event is registered with the div.

On Chrome and Safari it works, on FF the SVG sits at a different position and the “hitbox” of the div where I can hover, is very large, like 3 times the actual size of the div (checked with Firebug, the div also has width and height set to pixels).

How can it be that the mouseover-event fires at a larger region than the div occupies?

    $("#was_arrows").mouseover(function() {
            $('#was_arrows svg#normal').attr("class","hidden");
            $('#was_arrows svg#hover').attr("class","");
    });`

    #was_arrows {
        cursor: pointer;
        position:absolute;
        right: 40px;
        top: 23px;
        height: 30px;
        width: 53px;
    }

    <div id="was_arrows">
        <svg id="normal">
            <path d="M 5 0 l 0 30 l 15 -15 l -15 -15"/>
            <path d="M 25 0 l 0 30 l 15 -15 l -15 -15"/>
            <path d="M 45 0 l 0 30 l 15 -15 l -15 -15"/>
        </svg>
        <svg id="hover" class="hidden">
            <path d="M 5 0 l 0 30 l 15 -15 l -15 -15"/>
            <path d="M 25 0 l 0 30 l 15 -15 l -15 -15"/>
            <path d="M 45 0 l 0 30 l 15 -15 l -15 -15"/>
        </svg>
    </div>

LINK: http://streuplan.feibra.at/streuplan/index.php?r=streuplan/go

Answer

Your <svg> elements don’t have width and height attributes. This means they become 300 x 150 pixels in size (Chrome doesn’t implement this correctly which is why you see the difference). I’m not sure what you want in your case but starting with a width and height of 100% would not be ureasonable.

Firefox div > svg mouseover fires OUTSIDE div

Advertisement

Answer