0

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

在 Chrome 和 Safari 上它可以工作，在 FF 上，SVG 位于不同的位置div，我可以悬停的“hitbox”非常大，是 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;
}

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

4

1 回答 1

1

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

于 2013-10-09T14:21:04.213 回答