Question

此处http://davidwalsh.name/css-transformations有一个示例，说明如何在悬停时使用CSS转换来旋转链接，但我无法使其工作

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:hover{
                font-size:45px;
                -webkit-transform:rotate(5deg);
            }
        </style>
    </head>
    <body>
        <a href="http://davidwalsh.name/css-transformations" target="_blank">text</a>

    </body>
</html>

当我悬停链接时，它确实改变了它的字体，但它不会旋转。我尝试使用-webkit-transform（我使用谷歌浏览器），但它也没有用。

以下是我正在尝试做的一个示例：http://davidwalsh.name/demo/cpojer-links.php

我也试过

a:link:hover{
         font-size:45px;
         -webkit-transform:rotate(5deg);
        }

但它也没有用。

如果我把链接放在'li'然后使用li：hover，那我就能“让它工作”，但这不是我想要的。

思想？

Answer 1

无法转换内联元素。您需要将其设为display: block或display: inline-block

一个元素，其布局由CSS框模型控制，该模型是块级或原子内联级元素，或者其'display'属性计算为'table-row'，'table-row-group'， 'table-header-group'，'table-footer-group'，'table-cell'或'table-caption'[CSS21]

来源：w3c

Answer 2

您忘记添加转换持续时间，我也建议添加对其他浏览器的支持。我能够让这些代码完成您想要的操作。

a:hover{
    font-size:45px;
    -webkit-transform:rotate(5deg);
    -webkit-transition-duration:1s;
}

Here's a link到您的代码的工作版本。

无法获取链接：悬停转换工作

2 个答案: