Javascript Firefox div>；svg鼠标在div外开火

我有一个

div

，里面有两个

svg

-元素，鼠标悬停时显示/隐藏这些元素。鼠标悬停事件在

div

中注册

在Chrome和Safari上它工作，在FF上SVG位于不同的位置，我可以悬停的

div

的“hitbox”非常大，大约是div实际大小的3倍（通过Firebug检查，div的宽度和高度也设置为像素）

mouseover事件怎么可能在比

div

所占区域更大的区域触发

Javascript:

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

HTML:

链接：

您的

元素没有宽度和高度属性。这意味着它们的大小变为300 x 150像素（Chrome无法正确实现这一点，这就是为什么您会看到差异）。我不确定你想要什么，但从100%的宽度和高度开始是不合理的

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

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