twitter-bootstrap 在鼠标悬停时更改图标大小 - (FontAwesome + Bootstrap)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14893950/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change icon size on mouse over - (FontAwesome + Bootstrap)
提问by Gonzalo
I want to display a 2x icon size on mouse over element.
我想在鼠标悬停在元素上时显示 2 倍的图标大小。
I'm using FontAwesome with bootstrap. I have a List like this:
我正在使用 FontAwesome 和 bootstrap。我有一个这样的列表：
<ul>
<li><a href ="#"><i class="icon-inbox"></i> Inbox<a/></li>
<li><a href ="#"><i class="icon-print"></i> print<a/></li>
....
</ul>
I want to add "icon-2x" fontawesome css class, on mouse over element, to display a larger icon, and remove that class on mouse leave.
我想在鼠标悬停在元素上添加“icon-2x”fontawesome css 类，以显示更大的图标，并在鼠标离开时删除该类。
I want it to look like the FontAwesome homepage examples. like this:
我希望它看起来像 FontAwesome 主页示例。像这样：
I tried finding elemets with jQuery to add the css class, but a couldn't do it.
我尝试使用 jQuery 查找 elemets 来添加 css 类，但无法做到。
Can anyone help me?
谁能帮我？
Thanks
谢谢
回答by James Donnelly
Why don't you just use CSS :hover?
为什么不直接使用 CSS :hover？
li i[class^="icon-"] { font-size:12px; }
li:hover i[class^="icon-"] { font-size:24px; }
FontAwesome uses a font for the icons, so to double the icon size you simply double the font size. Of course you'd also need to cater for padding, margins and whatever else to ensure the icon stays relative to the text beside it.
FontAwesome 为图标使用字体，因此要将图标大小加倍，您只需将字体大小加倍。当然，您还需要考虑填充、边距和其他任何内容，以确保图标与其旁边的文本保持相关。
If you still want to use jQuery to add a new class:
如果您仍然想使用 jQuery 添加一个新类：
$('li').hover(function() {
$('i[class^="icon-"]', this).addClass('icon-2x');
}, function() {
$('i[class^="icon-"]', this).removeClass('icon-2x');
})
回答by Przemek Nowak
I would suggest to use CSS scale (I'm using it for links on my page with FontAwesome):
我建议使用 CSS 比例（我将它用于我的页面上的 FontAwesome 链接）：
a:hover i { transform: scale(2); }
It won't move the elements which are next to the icon (for example the other text) what change font size cause.
它不会移动图标旁边的元素（例如其他文本），这是改变字体大小的原因。
UPDATE
更新
See the example how it works with FontAwesome on the footer of my home page: http://pnowy.github.io/about/
请参阅我主页页脚上的 FontAwesome 示例：http://pnowy.github.io/about/
回答by dinodsaurus
If you would like to have a animated switch you will need to use javascript. But you could achieve this without it by doing this
如果您想要一个动画开关，您将需要使用 javascript。但是你可以通过这样做来实现这一目标
<ul>
<li><a class="image" href ="#"></a> <p>Long story</p></li>
</ul>
And then stylew it like this
然后像这样设计它
.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;
}
You can see a fiddle here jsFiddle
你可以在这里看到一个小提琴jsFiddle
回答by Astrotim
You need to apply the font size to the :before pseudo element.
您需要将字体大小应用于 :before 伪元素。
li:hover i:before {
font-size: 24px /*or whatever*/
}
