5

我想在鼠标悬停元素上显示 2x 图标大小。

我正在使用带有引导程序的 FontAwesome。我有一个这样的列表：

<ul>
    <li><a href ="#"><i class="icon-inbox"></i> Inbox<a/></li>
    <li><a href ="#"><i class="icon-print"></i> print<a/></li>
    ....
</ul>

我想在鼠标悬停元素上添加“icon-2x”fontawesome css 类，以显示更大的图标，并在鼠标离开时删除该类。

我希望它看起来像 FontAwesome 主页示例。像这样：

在此处输入图像描述

我尝试使用 jQuery 查找元素以添加 css 类，但无法做到。

谁能帮我？

谢谢

4

4 回答 4

7

你为什么不直接使用 CSS :hover？

li i[class^="icon-"] { font-size:12px; }
li:hover i[class^="icon-"] { font-size:24px; }

FontAwesome 为图标使用一种字体，因此要将图标大小加倍，您只需将字体大小加倍。当然，您还需要考虑填充、边距和其他任何东西，以确保图标保持相对于它旁边的文本。

如果你仍然想使用 jQuery 添加一个新类：

$('li').hover(function() {
    $('i[class^="icon-"]', this).addClass('icon-2x');
}, function() {
    $('i[class^="icon-"]', this).removeClass('icon-2x');
})
于 2013-02-15T11:50:10.983 回答
7

我建议使用 CSS 比例（我将它用于我的页面上的 FontAwesome 链接）：

a:hover i { transform: scale(2); }

它不会移动图标旁边的元素（例如其他文本），这是改变字体大小的原因。

更新

在我的主页页脚查看它如何与 FontAwesome 一起使用的示例：http: //pnowy.github.io/about/

于 2016-02-19T09:55:27.543 回答
0

如果你想要一个动画开关，你需要使用 javascript。但是你可以通过这样做来实现这一点

<ul>
    <li><a class="image" href ="#"></a> <p>Long story</p></li>
</ul>

然后像这样设置它

.image{
    float:left;
    display:block;
    background:url('http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png');
    width:50px;
    height:50px;
    background-size:50px 50px;
}
li p{
    line-height:50px;
    vertical-align:center;
}
li:hover p{
    line-height:70px;
}
li:hover .image{
    width:70px;
    height:70px;
    background-size:70px 70px;
}

你可以在这里看到一个小提琴jsFiddle

于 2013-02-15T11:58:17.840 回答
0

您需要将字体大小应用于 :before 伪元素。

li:hover i:before {
    font-size: 24px /*or whatever*/
}

见： http ://astronautweb.co/snippet/font-awesome/

于 2013-02-15T12:55:43.663 回答