懸停效果

Question

這是我的菜單：

<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); 
    } 

所以我基本上要每當我將鼠標懸停在菜單鏈接到應用上的大寫字母變換效果。如何實現這一目標？

Answer 1

當你的英文字母上專門懸停^h，乙，Ç和P

使用a懸停達到所要求的效果，您的代碼纔有效。以下是一個工作示例。

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>