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
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.