悬停效果

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>