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 は使用できます