菜单字母上的悬停效果

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

所以我基本上想在将鼠标悬停在菜单链接上时对大写字母应用 TRANSFORM 效果。如何实现？

Answer 1

只有当您专门将鼠标悬停在字母 H、B、C[=27 上时，您的代码才会起作用=] 和 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>