Firefox div > svg mouseover 触发 OUTSIDE div答案

【问题标题】：Firefox div > svg mouseover fires OUTSIDE divFirefox div > svg mouseover 触发 OUTSIDE div
【发布时间】：2013-10-16 20:59:06
【问题描述】：

我有一个div，里面有两个svg-元素，当鼠标悬停时会显示/隐藏。 mouseover 事件是使用div 注册的。

在 Chrome 和 Safari 上它可以工作，在 FF 上，SVG 位于不同的位置，我可以悬停的 div 的“命中框”非常大，就像 div 实际大小的 3 倍（检查Firebug，div 的宽度和高度也设置为像素）。

mouseover-event 触发的区域怎么会比div 占据的区域更大？

Javascript：

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

HTML：

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

CSS：

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

链接：http://streuplan.feibra.at/streuplan/index.php?r=streuplan/go

【问题讨论】：

标签： javascript firefox html svg mouseover

【解决方案1】：

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

【讨论】：