菜单字母的悬停效果

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效果。如何实现？

- user6494366

Answer 1

只有当您将鼠标悬停在H、B、C和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>

- Pugazh

---

太棒了。谢谢！ - user6494366