Hover-Effekt auf einem Menü Brief

Question

Das ist meine Menüs:

<TD vAlign="Middle" align="Center"><A href="/?open_the=gate"><SPAN class="H">H</SPAN>ome</A></TD> 
<TD vAlign="Middle" align="Center"><A href="/?open_the=book"><SPAN class="B">B</SPAN>ook</A></TD> 
<TD vAlign="Middle" align="Center"><A href="/?open_the=contact_page"><SPAN class="C">C</SPAN>ontact <SPAN class="P">P</SPAN>age</A></TD> 

CSS:

.H:Hover 
{ 
    DISPLAY: Inline-Block; 
    TRANSFORM: RotateY(180deg); 
    -O-TRANSFORM: RotateY(180deg); 
    -MS-TRANSFORM: RotateY(180deg); 
    -MOZ-TRANSFORM: RotateY(180deg); 
    -KHTML-TRANSFORM: RotateY(180deg); 
    -WEBKIT-TRANSFORM: RotateY(180deg); 
    } 

Deshalb möchte ich im Grunde die VERÄNDERN Auswirkungen auf die Großbuchstaben gelten, wenn ich über die Menüs Links schweben . Wie erreiche ich das?

Answer 1

Ihr Code wird nur funktionieren, wenn Sie speziell auf die Buchstaben schweben H, B, C und P

Verwenden Sie den Hover von a die gewünschte Wirkung zu erzielen. Unten ist ein funktionierendes Beispiel.

a { 
 
    padding: 5px 10px; 
 
} 
 
a:hover span { 
 
    color: red; 
 
    text-decoration: underline; 
 
    display: inline-block; 
 
    transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -khtml-transform: rotateY(180deg); 
 
    -webkit-transform: rotateY(180deg); 
 
}

<td valign="middle" align="center"> 
 
    <a href="/?open_the=gate"><span>H</span>ome</a> 
 
</td> 
 
<td valign="middle" align="center"> 
 
    <a href="/?open_the=book"><span>B</span>ook</a> 
 
</td> 
 
<td valign="middle" align="center"> 
 
    <a href="/?open_the=contact_page"><span>C</span>ontact <span>P</span>age</a> 
 
</td>