菜单字母上的悬停效果答案

【问题标题】：Hover effect on a menu letter菜单字母上的悬停效果
【发布时间】：2016-11-08 04:59:05
【问题描述】：

这是我的菜单：

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

【问题讨论】：

标签： jquery html css hover transform

【解决方案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>

【讨论】：

太棒了。谢谢！