Bild und Text bei hover tauschen

[elcomportal]

Hallo,
also das habe ich jetzt:

Auszug aus der CSS Datei:
.v1 {visibility:hidden;}
.v2 {visibility:hidden;}

.bild1 {
    position: absolute;
    background: #dF0000;
    BACKGROUND: url(images/content/produkte/ut_hecken.gif);
    left: 177px;
    top: 60px;
    height:28%;
    width:28%;
    border:0px;
    overflow: auto;
    background-repeat:no-repeat;
    .v2 {visibility:visible;}
}

.bild1 a:hover {
    display: block;
    padding: 5px;
    background: #dfdfdf;
    background-repeat:no-repeat;
    .v1 {visibility:visible;}
}

und die HTML Datei:

<div class="bild1" style="Z-INDEX: 10; LEFT: 2%; VISIBILITY: inherit; POSITION: absolute; TOP: 21%;">
    <a href="01_prod_05_sonder_00.htm">
    <span class="v1"> hallo du da <br> test</span>
    <span class="v2"> der andere Text <br>   test</span>
    </a>

Keiner der beiden Texte wird sichtbar. Schei...!
Bitte helft mir nochmal.
Danke.
Mfg
Torsten Müller