html - html5 css3 显示 svg 悬停的图像

Question

我在 html5 css 3 中有以下 svg 标记

<svg id="optionSvg" width="88" height="178">
    <rect id="opt1" class="mouseOver item1" x="125" y="70" width="200" height="150" fill="blue" stroke="black" style="z-index: 1"></rect>
    <rect id="opt2" class="mouseOver" x="350" y="70" width="200" height="150" fill="yellow" stroke="black"></rect>
    <rect id="opt3" class="mouseOver" x="125" y="250" width="200" height="150" fill="green" stroke="black"></rect>
    <rect id="opt4" class="mouseOver" x="350" y="250" width="200" height="150" fill="orange" stroke="black"></rect>
    <rect id="opt5" class="mouseOver" x="125" y="430" width="430" height="150" fill="purple" stroke="black"></rect>
</svg>

这是css类

    .mouseOver:hover {
        opacity: 0.1;
        fill: white;
        z-index: -1;
        position: relative;
    }

    .item1:hover {
        position: relative;
        background: url(testImage.png) no-repeat;
        background-attachment: fixed;
        animation: ease-in;
    }

所以我想做的是在鼠标悬停在第一个项目上时显示 testImage.png，但看起来它不起作用。请不要使用 jQuery，javascript 可以