Question

我有一个div，里面有两个svg元素，当用鼠标悬停时会显示/隐藏这些元素。 mouseover事件已在div注册。

在Chrome和Safari上它可以正常工作，在FF上，SVG位于不同的位置，并且＆＃34; hitbox＆＃34;我可以悬停的div非常大，就像div的实际大小的3倍（用Firebug检查，div也有宽度和高度设置为像素）。

鼠标悬停事件如何在比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;
}

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

Answer 1

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

Firefox div＆gt; svg mouseover触发OUTSIDE div

1 个答案: